Question

我在jquery中制作了幻灯片，但是我很难为触发器制作一个合适的算法来实现功能。在这方面的任何帮助将受到高度赞赏。

HTML

<div class=slide-show>
    <div id=slide1><h1>1</h1></div>
    <div id=slide2><h1>2</h1></div>
    <div id=slide3><h1>3</h1></div>
    <div id=slide4><h1>4</h1></div>
</div>
<div class=slide-controls>
    <div class=slide-controls-wrap>
        <ul style="float:left;">
            <li class=slide-cont id=1></li>
            <li class=slide-cont id=2></li>
            <li class=slide-cont id=3></li>
            <li class=slide-cont id=4></li>
        </ul>
        <ul style="float:right;margin-right:50px;margin-top:2px;">
            <li class=left-arrow></li>
            <li class=right-arrow></li>
        </ul>
    </div>
</div>

JQUERY

$(document).ready(function () {
    var delayInterval = 5000;
    var delay = setTimeout;
    function slide_show(cont) {
        if (cont > 4) cont = 1;
        $("#slide" + cont).fadeIn(1500);
        $("#" + cont).css("background-position", '-69px -94px');
        delay(function () {
            $("#slide" + cont).fadeOut(1500);
            $("#" + cont).css("background-position", '-19px -94px');
            $('#1').click(function () {
                slide_show(1);
            });
            $('#2').click(function () {
                slide_show(2);
            });
            $('#3').click(function () {
                slide_show(3);
            });
            $('#4').click(function () {
                slide_show(4);
            });
            slide_show(cont + 1);    
            //$("#5").css("background-position",'-69px -94px');
        }, delayInterval);
    }
    slide_show(1);    
});

提前致谢。

Answer 1

演示：http://codepen.io/anon/pen/azpwMy

这是一个更好的功能：）

$(document).ready(function(){
  $('.slide-cont').click(function(){
    var slideId = $(this).attr('id');
    currentSlide = slideId - 1;
    $(slides).hide();
    $('#slide' + slideId).fadeIn(1500);
  })
})
var slides = $('.slide-show div');
currentSlide = 0;

function changeSlide(n) {
    currentSlide += n;
    if (currentSlide > slides.length - 1)
        currentSlide = 0;
    else if(currentSlide < 0)
        currentSlide = slides.length -1;

   $(slides).hide();
    $(slides[currentSlide]).fadeIn(1500);
}

如果您想要向右移动，请使用 changeSlide（1）进行调用，向左调用 changeSlide（-1）

根据时间更改当前幻灯片。

//Go one slide to the right every 2 seconds
setInterval(function(){changeSlide(1)}, 2000);

希望我帮助过！

触发器在Jquery幻灯片中无法正常工作

1 个答案: