0

我的幻灯片图像的小 jQuery 脚本有一个小问题。该脚本本身运行良好，其目的是滚动图像确实“褪色”，经典。

问题是，如果我想将它用于页面上的另一个块，那么它不再正常工作.. 问题肯定出在 id 上，但不能让它工作。

这是脚本：

功能滑块（）{

    功能动画滑块（）{
        $('.slider #'+shown).animate({
            opacity:0 //淡出
        },1000);
        $('.slider #'+next_slide).animate({
            opacity:1.0 //淡入
        },1000);
        //console.log(显示, next_slide);
        显示 = next_slide;
    }

    功能选择下一个（）{
        next_slide = (显示 == sc)? 1：显示+1；
        动画滑块（）；
    }

    $('.slider #1').css({opacity:1}); //显示第一张图片
    显示的变量 = 1;
    var next_slide;
    var sc = $('.slider img').length; // 总图像
    var iv = setInterval(choose_next,3500);
    $('.slider_nav').hover(function(){
        清除间隔（iv）；// 停止动画
    }， 功能（） {
        iv = setInterval(choose_next,3500); // 恢复动画
    });
    $('.slider_nav span').click(function(e){
        var n = e.target.getAttribute('class');
        //console.log(e.target.outerHTML, n);
        if (n=='prev') {
            next_slide = (显示 == 1)? sc：显示-1；
        }否则如果（n=='下一个'）{
            next_slide = (显示 == sc)? 1：显示+1；
        } 别的 {
            返回;
        }
        动画滑块（）；
    });
}

window.onload = 滑块；

任何想法 ？谢谢你们 ：）

4

1 回答 1

0

我不确定你想做什么，但如果你想要重用性：

编辑：我已经修改假设您的 2 张幻灯片是独立的

这是一个快速的解决方案，正如@David Barker 提到的，做一个 jQuery 插件会更干净

JS： 

var sliderTop = "#slider.top";  
var sliderBottom = "#slider.bottom";


 function slider(el) {

    function animate_slider(el){
        $(el + shown).animate({
            opacity:0 // fade out
        },1000);
        $(el + next_slide).animate({
            opacity:1.0 // fade in
        },1000);
        //console.log(shown, next_slide);
        shown = next_slide;
    }

    function choose_next(el) {
        next_slide = (shown == sc)? 1:shown+1;
        animate_slider(e);
    }

    $(el + ' #1').css({opacity:1}); //show 1st image
    var shown = 1;
    var next_slide;
    var sc = $(el + ' img').length; // total images
    var iv = setInterval(choose_next,3500);
    $(el + '_nav').hover(function(){
        clearInterval(iv); // stop animation
    }, function() {
        iv = setInterval(choose_next,3500); // resume animation
    });
    $(el + '_nav span').click(function(e){
        var n = e.target.getAttribute('class');
        //console.log(e.target.outerHTML, n);
        if (n=='prev') {
            next_slide = (shown == 1)? sc:shown-1;
        } else if(n=='next') {
            next_slide = (shown == sc)? 1:shown+1;
        } else {
            return;
        }
        animate_slider(el);
    });
}
window.onload = function() {
    slider(sliderTop);
    slider(sliderBottom);
}

HTML： 

<div id="slider" class="top">
    <h2>Nos partenaires</h2>
    <img id="1" src="" alt="">
    <img id="2" src="" alt="">
    <img id="3" src="" alt="">
</div>
<div class="slider_nav">
    <span class="prev">Précédent</span><!--
    --><span class="next">Suivant</span>
</div>

<div id="slider" class="bottom">
    <h2>Nos partenaires</h2>
    <img id="1" src="" alt="">
    <img id="2" src="" alt="">
    <img id="3" src="" alt="">
</div>
<div class="slider_nav">
    <span class="prev">Précédent</span><!--
    --><span class="next">Suivant</span>
</div>
于 2013-07-04T18:21:58.543 回答