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张幻灯片是独立的

这是一个快速的解决方案，正如@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>

滑块图片ID

1 个答案: