Hi i want to restart the if and else when the setInterval ends in the last image. The function is working but, when the third and last image com it didn't restart. Can someone help me, thank you!
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slider Jquery Test</title>
<link href="slider.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/slider.js"></script>
</head>
<body>
<div id="container">
<ul id="buttons" class="buttons">
<li><a href="#"><img id="left_b" class="left_b" src="imagens/flechae.png" alt="Anterior" onMouseOver="this.src='imagens/flechaehover.png'" onMouseOut="this.src='imagens/flechae.png'"></a></li>
<li><a href="#"><img id="right_b" class="right_b" src="imagens/flechad.png" alt="Proximo" onMouseOver="this.src='imagens/flechadhover.png'" onMouseOut="this.src='imagens/flechad.png'"></a></li>
</ul>
<ul id="gallery-ul" class="gallery-ul">
<li><img id="1" class="images" src="imagens/imagem1.jpg" alt="Imagem 1"></li>
<li><img id="2" class="images" src="imagens/imagem2.jpg" alt="Imagem 2"></li>
<li><img id="3" class="images" src="imagens/imagem3.jpg" alt="Imagem 3"></li>
</ul>
</div>
</body>
</html>
JS $(function(){ // Buttons Hover Effect buttonsHover();
function buttonsHover(){
var buttons = $('.buttons');
var container = $('#container');
container.hover(function(){
buttons.fadeIn();
}, function(){
buttons.fadeOut();
});
}
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
// slide
var numImages = 0;
var currentImage = 1;
var totalWidth = 0;
var galleryUlLi = $('.gallery-ul li');
var galleryUl = $('.gallery-ul');
var leftButton = $('.left_b');
var rightButton = $('.right_b');
var interval = 0;
hideButtons();
loop();
// images_container li class with a function to add values for each numImages and totalWidth variables
galleryUlLi.each(function(){
numImages++;
totalWidth += 1200;
});
// images_container class with the css width value of the images
galleryUl.css('width', totalWidth + 'px');
// Right button click function
rightButton.click(function(){
moveLeft();
hideButtons();
clearLoop();
loop();
});
// Left button click function
leftButton.click(function(){
moveRight();
hideButtons();
clearLoop();
loop();
});
// Move Left function
function moveLeft(){
if(currentImage < numImages){
galleryUl.animate({'margin-left': '-=1200px'}, 1000);
currentImage++;
hideButtons();
}
}
// Move Right function
function moveRight(){
if(currentImage > 1){
galleryUl.animate({'margin-left': '+=1200px'}, 1000);
currentImage--;
hideButtons();
}
}
// function hide buttons
function hideButtons(){
if(currentImage === 1){
leftButton.hide();
}
else{
leftButton.show();
}
if(currentImage === numImages){
rightButton.hide();
}
else{
rightButton.show();
}
}
function loop(){
interval = setInterval(moveLeft, 3000);
}
function clearLoop(){
clearInterval(interval);
}
}); // End of main function
Aucun commentaire:
Enregistrer un commentaire