在我的滑块下面添加导航按钮

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方法以及每种方法作品。如果其他人想要一起提供更好的解释代码如何工作，我会批准。