滑块图像id

Question

我有一个小问题，一个小jQuery脚本，我的幻灯片图像。该脚本本身工作得非常好，其目的是在图像之间滚动，实际上是“淡入淡出”，这是一部经典之作。

问题是，如果我想将它用于页面上的另一个块，那么它将不再正常工作。。问题当然出在id上，但无法解决。

这是脚本：

function slider() {

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

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

    $('.slider #1').css({opacity:1}); //show 1st image
    var shown = 1;
    var next_slide;
    var sc = $('.slider img').length; // total images
    var iv = setInterval(choose_next,3500);
    $('.slider_nav').hover(function(){
        clearInterval(iv); // stop animation
    }, function() {
        iv = setInterval(choose_next,3500); // resume animation
    });
    $('.slider_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();
    });
}

window.onload = slider;

有什么想法吗？谢谢大家：）

Answer 1

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

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

这是一个快速的解决方案，正如@davidbarker所提到的，使用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);
}

超文本标记语言：

<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>