Jak zrobić nieskończony przewijany suwak img?

Question

Prawie skończyłem stronę internetową dla klienta w pracy, który ma duży suwak dynamiczny o pełnej szerokości na stronie głównej. Jako że podali kilka specyfikacji, obecnie suwak jest bardzo prosty; po prostu przewija się od lewej do prawej, zmieniając lewą właściwość CSS na UL. Oczywiście z tego powodu przewinie się on nagle z powrotem na początek, gdy dotrze do końca, czego klienci najwyraźniej nie chcą.

Nie jestem ekspertem od jQuery i zastanawiałem się, jak mogę łatwo zmienić ten suwak, aby przewijał się bez końca.

Używa również prostej nawigacji, ma cztery slajdy i ma mały pasek kontrolny na dole z tytułem każdego na nim, aby szybko przejść do konkretnych slajdów. Ma również strzałkę, która następuje po ostatnim slajdzie.

Znalazłem rozwiązania, które sprawiają, że są zapętlone, ale nie widzę żadnego wyglądu zgodnego z nawigacją. Naprawdę chciałbym nie zaczynać od nowa, czy to będzie możliwe?

Oto cały kod, którego aktualnie używam, jeśli chciałbyś CSS, mogę to opublikować, ale nie sądziłem, że jest zbyt potrzebny.

Dziękuję bardzo z góry.

EDIT: jsFiddle Wynik

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

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

Być może trzeba zrobić sekcję Wyniki większe, aby zrekompensować reagującego CSS. Właśnie połączony arkusz stylów jak czułem leniwy, i nie może być arsed znaleźć wszystkie sekcje w pliku ...

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

udało się uruchom go, używając skryptu znalezionego tutaj: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Mimo że miało to pożądany wpływ na nieskończony suwak przewijania, nie mogłem wymyślić, jak wykonać skok do na Wędkarstwo działa właściwie, co w moim odczuciu bardzo odbiega od estetyki witryny ... Ale co, klient zawsze ma rację?

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

     }); 
}