0

我做了一些下面的脚本来制作简单的淡入淡出幻灯片。现在我想添加 Next/Prv 按钮。我该怎么做？

下面是我的 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;
}
4

1 回答 1

1

我已经尝试根据您的要求制作功能。我希望没问题。

$(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();
}
于 2013-07-02T10:14:49.280 回答