Come creare un cursore img a scorrimento continuo?

Question

Ho quasi finito un sito Web per un cliente al lavoro, che ha un cursore dinamico a tutta larghezza sulla home page. Dato che hanno dato poche indicazioni, attualmente il cursore è molto semplice; scorre semplicemente da sinistra a destra modificando la proprietà CSS sinistra sull'UL. Ovviamente, a causa di ciò, scorrerà all'improvviso all'inizio, una volta raggiunta la fine, cosa che i clienti non vogliono apparentemente.

Non sono un esperto di jQuery e mi chiedevo come avrei potuto cambiare facilmente questo cursore in modo che scorresse all'infinito.

Utilizza anche una navigazione semplice, ha quattro diapositive e ha una piccola barra di controllo in basso con il titolo di ciascuno su di esso per passare rapidamente a diapositive specifiche. Ha anche una freccia che segue l'ultima diapositiva.

Ho trovato soluzioni per farlo loop, ma non riesco a vedere nessuno che sembri compatibile con la navigazione. Mi piacerebbe davvero non dover ricominciare da zero, sarà possibile?

Ecco tutto il codice che sto usando attualmente, se vuoi il CSS posso postare anche questo, ma non pensavo che fosse troppo necessario.

Grazie mille in anticipo.

EDIT: jsFiddle Risultato

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

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

Potrebbe essere necessario per rendere la sezione dei risultati più grande per compensare la reattivo CSS. Ho appena linkato il foglio di stile come mi sentivo pigro, e non poteva essere mandato a quel paese per trovare tutte le sezioni del file ...

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

riuscito a farlo funzionare utilizzando uno script trovato qui: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Sebbene questo avesse l'effetto desiderato di un dispositivo di scorrimento a scorrimento infinito, non riuscivo a capire come eseguire il jump-to na la vigenza funziona correttamente, cosa che a mio avviso ha tolto parecchio dall'estetica del sito ... Ma quale mai, il cliente ha sempre ragione eh?

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

     }); 
}