在我的滑塊下面添加導航按鈕

Question

我創建了具有圖像，文本和鏈接的淡入淡出滑塊。我想在它下面添加一些導航項目符號來控制圖像。 這樣的： http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg

這裏是滑塊代碼：

HTML

<div class="slides">  

    <div class="slidiv"> 
<a href="..." ><img src="..." > 
     <span> text1 </span></a> 
    </div> 

    <div class="slidiv"> 
<a href="..." ><img src="..." > 
     <span> text2 </span></a> 
    </div> 

    <div class="slidiv"> 
<a href="..." ><img src="..." > 
     <span> text3 </span></a> 
    </div> 

    <div class="slidiv"> 
<a href="..." ><img src="..."> 
     <span> text4 </span></a> 
    </div> 

</div> 

CSS

.slides { 
overflow:hidden; 
top:0; 
position:relative; 
width:100%; 
height:206px; 
z-index:920; 
border-bottom:white 6px solid; 
} 

.slides img { 
position:absolute; 
left:0; 
top:0; 
} 

.slides span { 
    position: absolute; 
    right: 100px; 
    top: 160px; 
color:white !important; 
font-size:20px; 
} 

的Javascript

<script type="text/javascript"> 
$(function() { 
$('.slides .slidiv:gt(0)').hide(); 

setInterval(function() { 
    $('.slides').children().eq(0).fadeOut(2000) 
     .next('.slidiv') 
     .fadeIn(2000) 
     .end() 
     .appendTo('.slides'); 
}, 6000); // 6 seconds 
}); 
</script> 

Answer 1

你必須定義一個唯一的ID爲每一張幻燈片，然後生成HTML的圓圈（請確保您有參考的一種方式，其圈相匹配，其滑動）。然後，捕獲單擊事件，清除間隔，向前循環，直到「當前」位置中的幻燈片與圓形相匹配，然後再次創建間隔。當然，每當它向前循環時，您都需要爲與活動幻燈片關聯的圓設置一個視覺提示。

（Demo）

HTML

<div class="slider"> 
    <div class="slides"> 
     <div class="slidiv" id="1"> 
      <a href="..."> 
       <img src="http://placehold.it/350x150/3296fa/ffffff"> 
       <span>text1</span> 
      </a> 
     </div> 
     <div class="slidiv" id="2"> 
      <a href="..."> 
       <img src="http://placehold.it/350x150/fa9632/ffffff"> 
       <span>text2</span> 
      </a> 
     </div> 
     <div class="slidiv" id="3"> 
      <a href="..."> 
       <img src="http://placehold.it/350x150/ff3399/ffffff"> 
       <span>text3</span> 
      </a> 
     </div> 
     <div class="slidiv" id="4"> 
      <a href="..."> 
       <img src="http://placehold.it/350x150/33ff99/ffffff"> 
       <span>text4</span> 
      </a> 
     </div> 
    </div> 
    <div class="circles"> 
     <a href="javascript:void()" class="circle active" id="circle-1" data-moveto="1"></a> 
     <a href="javascript:void()" class="circle" id="circle-2" data-moveto="2"></a> 
     <a href="javascript:void()" class="circle" id="circle-3" data-moveto="3"></a> 
     <a href="javascript:void()" class="circle" id="circle-4" data-moveto="4"></a> 
    </div> 
</div> 

CSS

.circles, .circle { 
    display: inline-block; 
} 
.circles { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 
.circle { 
    padding: 5px; 
    border-radius: 100%; 
    border: 1px solid #444; 
} 
.active { 
    background: rgb(50, 150, 250); 
} 

JAVASCRIPT

$(function() { 
    $('.slides .slidiv:gt(0)').hide(); 
    $.fn.setActive = function() { 
     if ($(this).hasClass("slider")) { 
      $(".active", $(this)).removeClass("active"); 
      $("#circle-" + $(".slidiv:first-child", $(this),$(this)).attr("id"),$(this)).addClass("active"); 
      return this; 
     } 
     return false; 
    } 
    $.fn.cycleFwd = function(rateStart,rateEnd) { 
     if ($(this).hasClass("slider")) { 
      $('.slides', $(this)).children() 
       .eq(0) 
       .fadeOut(rateStart) 
       .next('.slidiv') 
       .fadeIn(rateEnd) 
       .end() 
       .appendTo($('.slides', $(this))); 
      $(this).setActive($('.slidiv:first-child',$(this)).attr("id")); 
      return this; 
     } 
     return false; 
    } 
    $.fn.cycleFwdTo = function (id,rate) { 
     if($(this).hasClass("slider")) { 
      var current = $(".slidiv:first-child", $(this)); 
      if(current.attr("id") === id) return true; 
      var count = id; 
      if(current.attr("id") > id) { 
       count = Number(current.nextAll().length) + Number(id) + 1; 
      } 
      if(count - current.attr("id") === 1) { 
       $(this).cycleFwd(rate,2000); 
      } else { 
       $(this).cycleFwd(rate,0); 
       $(this).cycleFwdTo(id,0); 
      } 
      return this; 
     } 
     return false; 
    } 
    $(".circle").on("click", function() { 
     clearInterval(window.interval); 
     var newFirst = $(this).attr("data-moveto"); 
     $(this).parent().parent().cycleFwdTo(newFirst,2000); 
     var self = this; 
     window.interval = setInterval(function() { 
      $(self).parent().parent().cycleFwd(2000,2000); 
     }, 6000); // 6 seconds 
    }); 
    $('.slider').each(function(){ 
     var self = this; 
     window.interval = setInterval(function() { 
      $(self).cycleFwd(2000,2000); 
     }, 6000); // 6 seconds 
    }); 
}); 

編輯：

這個答案不是很好，因爲它不能很好地解釋它是如何工作的，但這可以歸結爲「我可以寫一本小說」，解釋所有不同的OP方法以及每種方法作品。如果其他人想要一起提供更好的解釋代碼如何工作，我會批准。