點擊按鈕時無法移動傳送帶中的列表項目

我想創建一個簡單的傳送帶，而不使用jquery和javascript中的任何插件。我的問題是，單擊適當的按鈕時，視口不顯示下一個或上一個列表項。我的代碼是：點擊按鈕時無法移動傳送帶中的列表項目

HTML

<html> 
<body onload='createList()'> 
     <div id="carouse"> 
      <button id='btn-prev' onclick='showPrev()'><img src="orange-towards-left.png"></button> 
      <div id="viewport"> 
       <ul id="items"> 
       </ul> 
      </div> 
      <button id='btn-next' onclick='showNext()'><img src="orange-towards-right.png"></button> 
     </div> 
    </body> 
</html>

function createList(){ 
       var html=""; 
       for(var i=0;i<6;i++){ 
        html += "<li> Content " + (i+1) + "</li>"; 
       } 
       document.getElementById('items').innerHTML = html; 
      } 

      function showNext(){ 
       var $curr = $('#items li.current'); 
       console.log('Current Index :: ', $curr.index()); 
       $('#viewport ul').animate({right: '240px'},1000,function(){ 
        $curr.find("li:last").after($curr.find("li:first")); 
         //$(this).css({marginLeft:0}); 
       }); 
       console.log('Current Index (after):: ', $curr.index()); 
      } 

      function showPrev(){ 
       var $curr = $('#items li.current'); 

       $('#viewport ul').animate({right:'240px'},1000,function(){ 
        $curr.find("li:last").before($(this).find("li:first")); 
        //$(this).css({marginLeft:0}); 
       }); 
      }

CSS

#carouse{ 
       display: inline-flex; 
       /*visibility: hidden;*/ 
      } 

      #viewport{ 
       display:block; 
       width: 240px; 
       height: 125px; 
       position: relative; 
       overflow: hidden; 

      } 

      #items{ 
       list-style: none; 
       position: absolute; 
       padding: 0; 
       margin: 0; 
       width: 240px; 
       left: 0; 
       top: 0; 
       overflow: hidden; 
       list-style-type: none; 
       float:left; 
      } 

      #items li{ 
       float: left; 
       margin: 0 20px 0 0; 
       padding: 1px; 
       height: 121px; 
       border: 1px solid #dcdcdc; 
       width: 236px; 
      } 

      #btn-prev, #btn-next{ 
        background: none; 
        border: 0px; 
        width: 30px; 
        height: 38px; 
        margin-top: 30px; 
      } 

      #btn-next img{ 
       width: 8px; 
       height: 15px; 
      } 

      #btn-prev img{ 
       width: 8px; 
       height: 15px; 
      }

我不知道在哪裏誤採取是。我正在嘗試第一次。任何幫助表示讚賞。如果我曾經重複過一個問題，我很抱歉。

來源

2015-07-13 Pallavi Prasad

請提供小提琴！ –

你有一個很多東西失蹤！我不打算在這裏寫一篇文章，因爲有很多教程如this關於如何使用jQuery構建基本輪播。請通過其中的一些來了解基本知識。很高興知道你正在嘗試自己創建一個，而不是從網上下載一個。

幾件事情，但：

當你使用jQuery，請用它來盡最大可能。
，因爲他們使有點棘手設置的尺度，不要使用內嵌的事件處理程序，如onclick="showNext()"等
填充/保證金的旋轉木馬項目（li你的情況）是不是一個好主意。讓他們在他們的HTML中。

我只修改了你的代碼，包含了上面的要點來創建一個基本的輪播（沒有克隆作爲你通過把第一個元素放在最後等等）。如果你想重複使用它，你應該真的把它做成jQuery plugin的選項。這只是一個演示，並且可以隨意調整此代碼以適應您的需求。

(function createCarousel() { 

    var $container = $('#items'); 
    var current = 0; 
    var $html = $(); 

    for(var i=0; i<6; i++) { 
     $html = $html.add($("<li/>", { html: "Content " + (i+1) })); 
    } 
    $container.empty().append($html); 

    var $items = $container.find("li"); 
    var itemsCount = $items.length; 
    var itemWidth = $items.first().outerWidth(); 
    $container.width(itemWidth * itemsCount); 
    $items.width(itemWidth); 

    $("#btn-prev").on("click", showPrev); 
    $("#btn-next").on("click", showNext); 

    function showNext() { 
     current = current >= itemsCount - 1 ? 0 : (current + 1); 
     $container.animate({ 
      left: -(current * itemWidth) 
     }, 250); 
    } 

    function showPrev() { 
     current = current <= 0 ? itemsCount - 1 : (current - 1); 
     $container.animate({ 
      left: -(current * itemWidth) 
     }, 250); 
    } 
}());

我創建了一個working demo與完整的代碼在小提琴中。看一看。

來源

2015-07-13 12:32:57 lshettyl

謝謝@lshettyl。像魅力一樣工作。修改了代碼以適合我的需求。鏈接也相當有幫助。 –

點擊按鈕時無法移動傳送帶中的列表項目

回答

相關問題