如何制作无限滚动的图片轮播？

Question

我快要为工作中的一个客户完成一个网站，主页有一个宽幅动态滑块。由于客户没有给出太多具体规格，目前滑块非常基本；它只是通过更改 UL 上的左 CSS 属性从左到右滚动。显然，因为这个原因，一旦到达末尾，它会突然回滚到开头，而客户显然不想要这种效果。

我不是 jQuery 的专家，我想知道如何轻松地将此滑块更改为无限滚动。

它还使用简单的导航，有四个幻灯片，并在底部有一个带有每个幻灯片标题的控制栏，可以快速跳转到特定幻灯片。它还有一个箭头，跟随最新的幻灯片。

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

这是我目前正在使用的所有代码，如果您需要 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>

- Robin Neal

---

有很多跑马灯效果的滑动器可以使用。您考虑过使用已经构建好的滑动器吗？ - Reinstate Monica Cellio

以上代码在jsfiddle上需要修改才能正常工作。最好给我们页面的URL或演示。 - Reinstate Monica Cellio

已添加jsFiddle演示，如果仍然无法正常工作，请访问http://ethercreative.net/npseymour/。 - Robin Neal

除了Archer的评论，您还可以查看Nivo Slider。 - 000

好的。"顾客永远是对的" ;) 而不是使用列表，使用单独的图片。当你点击链接（或通过计时器激活）时，将新图像放置在右侧，然后滑动它覆盖现有的图像。然后删除你刚隐藏的那个图像。 - Reinstate Monica Cellio

Answer 1

使用在此处找到的脚本成功使其工作：http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery。虽然这样做实现了无限滚动的效果，但我无法弄清如何正确地使跳转导航正常工作，我认为这从视觉上削弱了网站的美感...但客户总是对的，不是吗？

$(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});

        });
}

- Robin Neal