jquery – 如何制作无休止的滚动img滑块？

我几乎完成了一个工作客户的网站,它在主页上有一个大的全宽动态滑块.由于它们提供的规格很少,目前滑块非常基本;它只需通过更改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>

解决方法

使用此处的脚本管理以使其工作： 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},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},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});

        });
}