我的图像滑动代码有问题。每当我按下“下一个”或“上一个”按钮时，我必须单击 3 次，直到按钮起作用，这样做之后它就可以完美地工作。这是我的代码:
sliderInt=1;
sliderNext=2;
$(document).ready(function(){
$('.slider>img#'+sliderInt).stop().fadeIn(500).delay(0);
startSlider();
});
function startSlider(){
count= $(".slider>img").size();
loop=setInterval(function(){
$(".slider>img#"+sliderInt).stop().fadeOut(500);
if(sliderNext>count){
sliderNext=1;
}
$(".slider>img#"+sliderNext).stop().fadeIn(500).delay(0);
sliderNext++;
sliderInt=sliderNext-1;
},5000);
}
function prev(){
stopLoop();
$(".slider>img#"+sliderInt).stop().fadeOut(500);
sliderInt--;
if(sliderInt<1){
sliderInt=count;
}
$(".slider>img#"+sliderInt).stop().fadeIn(500);
startSlider();
}
function next(){
stopLoop();
$(".slider>img#"+sliderNext).stop().fadeOut(500);
sliderNext++;
if(sliderNext>count){
sliderNext=1;
}
$(".slider>img#"+sliderNext).stop().fadeIn(500);
startSlider();
}
function stopLoop(){
window.clearInterval(loop);
}
最佳答案
这应该有效:
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var index = 0;
var intervalID = null;
$(document).ready(function() {
$(".slider img").hide();
$(".slider img").first().addClass("active").show();
startloop();
});
function startloop() {
intervalID = setInterval(function() {
next();
}, 5000);
}
function stoploop() {
clearInterval(intervalID);
}
function next() {
$(".slider img.active").removeClass("active").fadeOut(function() {
index++;
if(index == $(".slider img").length) {
index = 0;
$(this)
$(".slider img").first().addClass("active").fadeIn();
} else {
$(this).next().fadeIn().addClass("active");
}
});
}
function prev() {
$(".slider img.active").removeClass("active").fadeOut(function() {
index--
if(index < 0) {
index = $(".slider img").length-1;
$(this)
$(".slider img").last().addClass("active").fadeIn();
} else if(index == $(".slider img").length) {
index = 0;
$(this)
$(".slider img").first().addClass("active").fadeIn();
} else {
$(this).prev().fadeIn().addClass("active");
}
});
}
</script>
</head>
<body>
<div class="slider" >
<a href="#" onclick="prev();stoploop();">prev</a>
<a href="#" onclick="next();stoploop();">next</a>
<br>
<img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-7.jpg" title="1"/>
<img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-3.jpg" title="2"/>
<img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-2.jpg" title="3">
<img width="100px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/background-wallpapers-5.jpg" title="4">
</div>
</body>
</html>
关于javascript - jQuery 图像 slider 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25713012/