jquery - 如何制作无限滚动的图像 slider ？

Question

我几乎完成了一个工作客户的网站，该网站的主页上有一个宽大的动态 slider 。由于他们给出的规范很少，目前 slider 非常基本；它只是通过更改 UL 上的左侧 CSS 属性从左向右滚动。显然，正因为如此，它会在到达末尾时突然滚动回开头，这显然是客户不希望看到的。

我不是 jQuery 专家，我想知道如何轻松更改此 slider ，使其无限滚动。

它还使用了一个简单的导航，它有四张幻灯片，底部有一个小控件栏，上面有每个控件的标题，可以快速跳转到特定的幻灯片。它还有一个箭头指向最新的幻灯片。

我找到了使其循环的解决方案，但我看不到任何看起来与导航兼容的解决方案。我真的很想不必从头开始，这可能吗？

这是我目前使用的所有代码，如果您想要 CSS，我也可以发布，但我认为这不是太需要。

非常感谢。

编辑:jsFiddle 结果

http://jsfiddle.net/hCXhZ/5/embedded/result/

http://jsfiddle.net/hCXhZ/5/

您可能需要扩大结果部分以补偿响应式 CSS。我只是链接了样式表，因为我觉得很懒，无法找到文件中的所有部分...

jQuery

$(function(){ 
    var screenWidth = $(window).width();
    $("ul.slides li").css("width",screenWidth);

    $(window).resize(function() {
        var SlideWidth = $("ul.slides li").width();
        var screenWidth = $(window).width();
        $("ul.slides li").css("width",screenWidth);
    });



    $('.slider-controls li').click(function(){
        var slideToID = $(this).children().attr('rel');
        var SlideWidth = $("ul.slides li").width();
        var slideTo = (slideToID * SlideWidth) - SlideWidth;
        var arrowTo = 85+(240*(slideToID-1));


        $('.slider-controls li').removeClass('active');
        $(this).addClass('active');
        $('ul.slides').animate({"left": -slideTo});
        $('div.slider-arrow').animate({"left": arrowTo});
    });

});

function slider() {

    var SlideWidth = $("ul.slides li").width();
    var SlideCount = $("ul.slides li").size();
    var TotalWidth = SlideWidth * SlideCount;
    var StopPos = TotalWidth - SlideWidth;
    var CurPos  = $("ul.slides").position().left;


    if (CurPos <= -StopPos) {
        $("ul.slides").animate({"left": "0"});
    }
    if (CurPos > -StopPos) {
        $("ul.slides").animate({"left": "-="+SlideWidth+"px"});
    }

    var slideId = (-CurPos + SlideWidth) / SlideWidth;
    var fSlideId = slideId + 1;
        var arrowTo = 85+(240*(fSlideId-1));

    $('.slider-controls li').removeClass('active');
        if (fSlideId < 5) {
            $('.slider-controls li.slide'+fSlideId+'').addClass('active');
            $('div.slider-arrow').animate({"left": arrowTo});
        }
        if (fSlideId == 5) {
            $('.slider-controls li.slide1').addClass('active');
            $('div.slider-arrow').animate({"left": 85});

        }
};

$(function(){ 
    var SlideWidth = $("ul.slides li").width();
    var SlideCount = $("ul.slides li").size();
    var TotalWidth = SlideWidth * SlideCount;
    var StopPos = TotalWidth - SlideWidth;
    var CurPos  = $("ul.slides").position().left;


    timeout = setInterval('slider()', 6000);

    $(window).width();

    $("ul.slides").css("width",TotalWidth);


    $(".controls .leftarrow").click(function() {
    var CurPos  = $("ul.slides").position().left;
        if (CurPos >= 0){
            $("ul.slides").animate({"left": "-"+StopPos})
        }
        if (CurPos < 0){
            $("ul.slides").animate({"left": "+="+SlideWidth+"px"})
        }
    });

    $(".controls .rightarrow").click(function() {
    var CurPos  = $("ul.slides").position().left;

        if (CurPos <= -StopPos) {
            $("ul.slides").animate({"left": "0"})
        }
        if (CurPos > -StopPos) {
            $("ul.slides").animate({"left": "-=" + SlideWidth + "px"})
        }
    });

    $(".slider-controls").hover(
      function () {
        clearInterval(timeout);
      }, 
      function () {
        timeout = setInterval('slider()', 4000);
      }
    );

});

HTML

 <div id="slider">
    <ul class="slides">
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Innovation.jpeg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Modern Innovation</h1>
                        <p>                     <a href=""></a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/specialist-equipment.jpg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Specialist Equipment</h1>
                        <p>NP Seymour have a range of packhouse and grading equipment 
<br />                      <a href="http://www.google.com">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/Home-Page-slider-3.jpeg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Service and quality</h1>
                        <p>Purveyors of high quality, extremely useful Agricultural Machinery and accessories.<br />                        <a href="http://www.google.com/">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
                                            <li style="background-image: url(http://ethercreative.net/npseymour/wp-content/uploads/2012/06/slide-11.jpg);">
                            <div class="container_12">
                    <div class="grid_12">
                        <h1 class="title">Latest Technology</h1>
                        <p>We specialise in orchard, vineyard and hop machinery<br />                       <a href="http://www.google.com">Click here to view our products</a></p>
                    </div>
                </div>
            </li>                               
            </ul>
 </div>
 <div class="slider-controls">
    <ul class="container_12">
        <div class="slider-arrow"></div>

        <li class="alpha active slide1 grid_3">
            <a href="javascript:;" rel="1">Modern Innovation</a>
        </li>

        <li class="slide2 grid_3">
            <a href="javascript:;" rel="2">Specialist Equipment</a>
        </li>

        <li class="slide3 grid_3">
            <a href="javascript:;" rel="3">Service and quality</a>
        </li>

        <li class=" omega slide4 grid_3">
            <a href="javascript:;" rel="4">Latest Technology</a>
        </li>

    </ul>
 </div>

Answer 1

设法使用此处找到的脚本使其工作:http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

虽然这具有无限滚动 slider 的预期效果，但我无法弄清楚如何使跳转导航正常工作，在我看来这大大影响了网站的美感......但是什么时候，客户永远是对的，是吗？

$(function() {

    //rotation speed and timer
    var speed = 5000;
    var run = setInterval('rotate()', speed);   

    //grab the width and calculate left value\
    var screenWidth = $(window).width();
    $("ul.slides li").css("width",screenWidth);
    $("ul.slides li").width(screenWidth);   
    var fullWidth = $('ul.slides li').size() * $('ul.slides li').width();
    $('ul.slides').css('width', fullWidth);


    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

    //move the last item before first item, just in case user click prev button
    $('ul.slides li:first').before($('ul.slides li:last'));
    $('ul.slides li:first').before($('ul.slides li:last'));

    //set the default item to the correct position 
    $('ul.slides').css({'left' : left_value});

    //if user clicked on prev button
    $('a.controls.left').click(function() {

        //get the right position            
        var left_indent = parseInt($('ul.slides').css('left')) + item_width;

        //slide the item            
        $('ul.slides').animate({'left' : left_indent}, 1000,function(){    

            //move the last item and put it as first item               
            $('ul.slides li:first').before($('ul.slides li:last'));           

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });

        //cancel the link behavior            
        return false;

    });


    //if user clicked on next button
    $('a.controls.right').click(function() {

        //get the right position
        var left_indent = parseInt($('ul.slides').css('left')) - item_width;

        //slide the item
        $('ul.slides').animate({'left' : left_indent}, 1000, function () {

            //move the first item and put it as last item
            $('ul.slides li:last').after($('ul.slides li:first'));                  

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });

        //cancel the link behavior
        return false;

    });        

    //if mouse hover, pause the auto rotation, otherwise rotate it
    $('ul.slides').hover(

        function() {
            clearInterval(run);
        }, 
        function() {
            run = setInterval('rotate()', speed);   
        }
    ); 

});


//a simple function to click next link
//a timer will call this function, and the rotation will begin :)  
function rotate() {
    var item_width = $('ul.slides li').width(); 
    var left_value = item_width * (-1); 

        //get the right position
        var left_indent = parseInt($('ul.slides').css('left')) - item_width;

        //slide the item
        $('ul.slides').animate({'left' : left_indent}, 1000, function () {

            //move the first item and put it as last item
            $('ul.slides li:last').after($('ul.slides li:first'));                  

            //set the default item to correct position
            $('ul.slides').css({'left' : left_value});

        });
}