如何制作无休止的滚动图像滑块？

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>

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

        });
}