Làm cách nào để tạo thanh trượt img cuộn vô tận?

Question

Tôi gần như đã hoàn thành một trang web cho một khách hàng tại nơi làm việc, trong đó có một thanh trượt động đầy đủ chiều rộng lớn trên trang chủ. Vì họ đã đưa ra vài thông số kỹ thuật, hiện tại thanh trượt rất cơ bản; nó chỉ đơn giản là cuộn sang trái sang phải bằng cách thay đổi thuộc tính CSS bên trái trên UL. Rõ ràng, bởi vì điều này nó sẽ cuộn bất ngờ trở lại đầu khi nó đạt đến kết thúc, mà các khách hàng không muốn rõ ràng.

Tôi không phải là chuyên gia về jQuery và tôi đã tự hỏi làm thế nào tôi có thể dễ dàng thay đổi thanh trượt này để nó sẽ cuộn vô tận thay thế.

Nó cũng sử dụng điều hướng đơn giản, nó có bốn trang trình bày và có một thanh điều khiển nhỏ ở dưới cùng với tiêu đề của mỗi trang để chuyển nhanh đến các trang trình bày cụ thể. Nó cũng có một mũi tên theo sau slide mới nhất.

Tôi đã tìm thấy giải pháp để tạo vòng lặp, nhưng tôi không thể thấy bất kỳ giải pháp nào tương thích với điều hướng. Tôi thực sự muốn không phải bắt đầu lại từ đầu, điều đó có khả thi không?

Đây là tất cả mã tôi hiện đang sử dụng, nếu bạn muốn CSS tôi cũng có thể đăng bài đó nhưng tôi không nghĩ rằng nó quá cần thiết.

Cảm ơn rất nhiều trước.

EDIT: jsFiddle quả

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

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

Bạn có thể cần phải thực hiện phần kết quả lớn hơn để bù đắp cho sự CSS đáp ứng. Tôi chỉ liên kết các kiểu như tôi đã cảm thấy lười biếng, và không thể được arsed để tìm tất cả các phần trong 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

Managed để làm cho nó hoạt động bằng cách sử dụng tập lệnh được tìm thấy tại đây: http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery

Mặc dù điều này có ảnh hưởng mong muốn của thanh trượt cuộn vô hạn, tôi không thể tìm ra cách nhảy vigation làm việc đúng cách, mà đã lấy đi khá nhiều từ thẩm mỹ của trang web theo ý kiến ​​của tôi ... Nhưng những gì bao giờ, khách hàng luôn luôn đúng 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}); 

     }); 
}