pum
Gebruiker
- Lid geworden
- 18 dec 2009
- Berichten
- 193
ik ben bezig met een full page slider. Ik weet dat hier plugins voor zijn maar wil het graag zelf maken om jquery zo beter onder de knie te krijgen. Nu heb ik mijn code hieronder gepost zouden jullie hier eens naar willen kijken en feedback hierop willen geven.
Ook had ik een vraag m.b.t de scope van variabels binnen jquery, wanneer zet ik var voor een variabel? is dit alleen binnen een functie ? wanneer gebruik ik dan juist geen var?
index.html
screen.css
functions.js
[JS]$(function(){
var pageWidth = $(document).width();
var pageHeight = $(document).height();
var page = $('.page');
var totalPages = page.length;
var pageWrapWidth = totalPages * pageWidth ;
var currentPage = 0;
var lastSlide = totalPages -1;
page.wrapAll('<div id="pagewrapper"></div>');
$('#pagewrapper').css('width', pageWrapWidth);
$('.page').css({ 'width': pageWidth, 'height': pageHeight });
$('#pagewrapper').after('<span class="button" id="prev">prev</span><span class="button next" id="next">next</span>');
checkCurrentPage(currentPage);
function checkCurrentPage(currentPage){
var movingSpace = currentPage * pageWidth;
if(currentPage == 0){
$('#prev').hide();
}else{
$('#pagewrapper').animate({
'marginLeft': movingSpace
}, 400, function(){
$('#prev').show();
});
}
if(currentPage == -lastSlide){
$('#next').hide();
}else{
$('#pagewrapper').animate({
'marginLeft': movingSpace
}, 400, function(){
$('#next').show();
});
}
}
$('.button').click(function(){
var id = $(this).attr('id');
switch(id){
case 'prev':
currentPage ++;
checkCurrentPage(currentPage);
break;
case 'next':
currentPage --;
checkCurrentPage(currentPage);
break;
}
});
});[/JS]
Ook had ik een vraag m.b.t de scope van variabels binnen jquery, wanneer zet ik var voor een variabel? is dit alleen binnen een functie ? wanneer gebruik ik dan juist geen var?
index.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="assets/css/screen.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="assets/js/functions.js"></script>
<title>Basis Html</title>
</head>
<body>
<div class="page blue">
page1
</div>
<div class="page green">
page2
</div>
<div class="page yellow">
page3
</div>
<div class="page purple">
page4
</div>
</body>
</html>screen.css
HTML:
body {
margin: 0;
padding: 0;
overflow: hidden; /* haalt de scrollbars weg */
}
#pagewrapper {
overflow: hidden;
}
/* page */
.page {
position: relative;
float: left;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.purple {
background-color: fuchsia;
}
.button {
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 45%;
background-color: red;
cursor: pointer;
}
#prev {
left: 0;
}
#next {
right: 0;
}functions.js
[JS]$(function(){
var pageWidth = $(document).width();
var pageHeight = $(document).height();
var page = $('.page');
var totalPages = page.length;
var pageWrapWidth = totalPages * pageWidth ;
var currentPage = 0;
var lastSlide = totalPages -1;
page.wrapAll('<div id="pagewrapper"></div>');
$('#pagewrapper').css('width', pageWrapWidth);
$('.page').css({ 'width': pageWidth, 'height': pageHeight });
$('#pagewrapper').after('<span class="button" id="prev">prev</span><span class="button next" id="next">next</span>');
checkCurrentPage(currentPage);
function checkCurrentPage(currentPage){
var movingSpace = currentPage * pageWidth;
if(currentPage == 0){
$('#prev').hide();
}else{
$('#pagewrapper').animate({
'marginLeft': movingSpace
}, 400, function(){
$('#prev').show();
});
}
if(currentPage == -lastSlide){
$('#next').hide();
}else{
$('#pagewrapper').animate({
'marginLeft': movingSpace
}, 400, function(){
$('#next').show();
});
}
}
$('.button').click(function(){
var id = $(this).attr('id');
switch(id){
case 'prev':
currentPage ++;
checkCurrentPage(currentPage);
break;
case 'next':
currentPage --;
checkCurrentPage(currentPage);
break;
}
});
});[/JS]
Laatst bewerkt:
Maar ga eens naar pagina 3, en dan dubbelklik op terug. Dan kom je op pagina 1, maar kun je nog steeds een keer terug, dat zou even gefixt moeten worden 
