jQuery - 重复图像
问题描述:
我在jQuery中有此代码。我有6个图像的代码,但是当它在6上时,它停止。我想从1开始重复一遍。我该怎么做?jQuery - 重复图像
<script type="text/javascript">
$(document).ready(function() {
var $slider = $('#slider'),
$prev = $('#prev'),
$next = $('#next'),
$slide = $slider.find('div');
var currentSlide = 0,
allSlides = $slider.find('div').length - 1; // index start from 0
$slider.find('div').eq(0).show();
function nextSlide() {
if(currentSlide < allSlides) {
$slide.eq(currentSlide).fadeOut('slow');
$slide.eq(currentSlide + 1).fadeIn('slow');
currentSlide+=1;
}
}
setInterval(function() {
nextSlide();
}, 5000);
function prevSlide() {
if(currentSlide > 0) {
$slide.eq(currentSlide).fadeOut(400);
$slide.eq(currentSlide - 1).fadeIn(400);
currentSlide-=1;
}
}
$next.on('click', nextSlide);
$prev.on('click', prevSlide);
});
</script>
答
只需设置currentSlide
滑动,从你开始
function nextSlide() {
if(currentSlide < allSlides) {
$slide.eq(currentSlide).fadeOut('slow');
$slide.eq(currentSlide + 1).fadeIn('slow');
currentSlide+=1;
}else{
currentSlide = 0;
}
}
对于prev
设置currentSlide
到最后一个
function prevSlide() {
if(currentSlide > 0) {
$slide.eq(currentSlide).fadeOut(400);
$slide.eq(currentSlide - 1).fadeIn(400);
currentSlide-=1;
}else {
currentSlide = allSlides-1;
}
}