我制作了一些下面的脚本来制作简单的fadeInOut幻灯片。现在我要添加Next / Prv buttton。我该怎么办?
以下是我的HTML:
<body>
<div id="slider-main-part">
<img class="slider-img" src="images/slider01.jpg" />
<img class="slider-img" src="images/slider02.jpg" />
<img class="slider-img" src="images/slider03.jpg" />
<img class="slider-img" src="images/slider04.jpg" />
</div>
</body>
以下是我的JavaScript / jQuery:
$(document).ready(function (e) {
var slider = {
init: function () {
var initialFadeIn = 1000;
var itemInterval = 5000;
var fadeOut = 2500;
var numberOfItems = $('.slider-img').length;
var currentItem = 0;
//show first item
$('.slider-img').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function () {
$('.slider-img').eq(currentItem).fadeOut(fadeOut);
if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
$('.slider-img').eq(currentItem).fadeIn(fadeOut);
}, itemInterval);
}
};
slider.init();
});
我在下面附上我的CSS:
#slider-main-part {
position: relative;
zoom:1;
margin:auto;
width:980px;
}
.slider-img {
display: none;
position: absolute;
top: 0;
left: 0;
width:980px;
border:none;
height:551px;
}
答案 0 :(得分:1)
我已根据您的要求尝试了make功能。我希望没关系。
$(document).ready(function(e) {
slider();
$('.slider_nav span').click(function(e){
var n = e.target.getAttribute('name');
if (n=='prev') {
if(currentitem == 1){
next_slide =imglength
}else{
next_slide =currentitem-1;
}
} else if(n=='next') {
if(currentitem == imglength){
next_slide = 1
}else{
next_slide =currentitem+1;
}
}
else {
return;
}
animate_slider();
});
});
function slider() {
var currentitem= 1;
var next_slide;
var imglength = $('.slider-main-part img').length; // total images
var setinterval = setInterval(choose_next,5000);
$('.slider-main-part #1').fadeIn(1000); //show 1st image
$('.slider_nav , .slider-main-part img').hover(function(){
clearInterval(setinterval); // stop animation
}, function() {
setinterval = setInterval(choose_next,5000); // resume animation
});
function animate_slider(){
$('.slider-main-part #'+currentitem).fadeOut(1000);
$('.slider-main-part #'+next_slide).fadeIn(1000);
currentitem = next_slide;
}
function choose_next() {
if(currentitem == imglength){
next_slide =1
}
else{
next_slide =currentitem+1;
}
animate_slider();
}