运用jQuery实现一个简易轮播图

如图

html

<div id="index-wrap">
	<div id="index-viewpoint">
	  <ul>
	    <li><img src="images/jxd1.jpg" alt=""></li>
	    <li><img src="images/jxd2.jpg" alt=""></li>
	    <li><img src="images/jxd3.jpg" alt=""></li>
	    <li><img src="images/jxd4.jpg" alt=""></li>
	    <li><img src="images/jxd5.jpg" alt=""></li>
	    <li><img src="images/jxd1.jpg" alt=""></li>
	  </ul>
	</div>
	<div id="index-viewpoint-control">
	  <ul>
	    <li id="viewpoint-prev">
	      <a href="#">
	        <div class="dot-left"></div>
	      </a>
	    </li>
	    <li id="viewpoint-next">
	      <a href="#">
	        <div class="dot-right"></div>
	      </a>
	    </li>
	  </ul>
	  <ol id="viewpoint-circle">
	    <li>
	      <a>1</a>
	    </li>
	    <li>
	      <a>2</a>
	    </li>
	    <li>
	      <a>3</a>
	    </li>
	    <li>
	      <a>4</a>
	    </li>
	    <li>
	      <a>5</a>
	    </li>
	  </ol>
	</div>
</div>

css

#index-wrap {
  width: 40em;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
} 
#index-viewpoint {
  width: 100%;
  height: 93%;
  overflow:hidden;
}
#index-viewpoint ul {
  padding: 0;
  margin: 0;
  display: flex;
}
#index-viewpoint ul li img {
  width: inherit;
}
/* 控制，包括下面的圆点和左右，方位用了父相子绝 */
#index-viewpoint-control {
  width: 100%;
  height: 65%;
  display: block;
  position: absolute;
  bottom: 0;
}
/* 下面圆点 */
#viewpoint-circle{
  width: 15%;
  height: 1.5em;
  padding: 0;
  margin: 0;
  display: flex;
  position: absolute;
  left: 40%;
  bottom: 0;
}
#viewpoint-circle li a{
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0;
  display: block;
}
#index-viewpoint-control ul{
  padding: 0;
}
/* 向左的箭头 */ 
#viewpoint-prev {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 20px;
  z-index: 1;
  position: absolute;
  left: 10px;
}
#viewpoint-prev:hover{
  background-color: rgba(0, 0, 0, 1);
}
.dot-left {  
  width: 10px;
  height: 10px;
  border-top: 5px solid rgba(255, 255, 255, .5);
  border-right: 5px solid rgba(255, 255, 255, .5);
  transform: rotate(225deg);
  position: absolute;
  left: 10px;
  top:8px;
}   
/* 向右的箭头 */  
#viewpoint-next {
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 20px;
  z-index: 1;
  position: absolute;
  right: 10px;
}
#viewpoint-next:hover{
  background-color: rgba(0, 0, 0, 1);
}
.dot-right {  
  width: 10px;
  height: 10px;
  border-top: 5px solid rgba(255, 255, 255, .5);
  border-right: 5px solid rgba(255, 255, 255, .5);
  transform: rotate(45deg);
  position: absolute;
  right: 10px;
  top: 8px;
} 

js

$(function() {
   var num = 0; //图的运动次数
   var timer = null; //定时器
   go();
   //先设置第一个的颜色
   $("#viewpoint-circle").find('a').eq(0).css("backgroundColor", "rgb(52, 152, 219)");
   function go() {
     timer = setInterval(function() {
       //恢复小圆点颜色
       $("#viewpoint-circle").find('a').css("backgroundColor", "rgba(0, 0, 0, .5)");
       //重设指定小圆点颜色
       $("#viewpoint-circle").find('a').eq(num%5).css("backgroundColor", "rgb(52, 152, 219)");
       //动！
       $("#index-viewpoint").find('ul').animate({"marginLeft":-640*num+"px"}, 600);
       ++num; num = num % 5;
     }, 6000);
   }
   //遍历每一个圆点添加点击事件，点击当前圆点则让num值赋为当前圆点的索引
   $("#viewpoint-circle").find('li').each(function (index) {
     $(this).click(function () {
         num = index;
         console.log(this);
         $("#viewpoint-circle").find('a').css("backgroundColor", "rgba(0, 0, 0, .5)");
         $("#viewpoint-circle").find('a').eq(num%5).css("backgroundColor", "rgb(52, 152, 219)");
         $("#index-viewpoint").find('ul').stop().animate({"marginLeft":-640*num+"px"}, 600);
     });
   });
   //左箭头点击事件
   $("#viewpoint-prev").click(function() {
     if(!num) num = 4;
     else --num;
     $("#viewpoint-circle").find('a').css("backgroundColor", "rgba(0, 0, 0, .5)");
     $("#viewpoint-circle").find('a').eq(num%5).css("backgroundColor", "rgb(52, 152, 219)");
     $("#index-viewpoint").find('ul').stop().animate({"marginLeft":-640*num+"px"}, 600);
   });
   //右箭头点击事件
   $("#viewpoint-next").click(function() {
     ++num;
     num = num % 5;
     $("#viewpoint-circle").find('a').css("backgroundColor", "rgba(0, 0, 0, .5)");
     $("#viewpoint-circle").find('a').eq(num%5).css("backgroundColor", "rgb(52, 152, 219)");
     $("#index-viewpoint").find('ul').stop().animate({"marginLeft":-640*num+"px"}, 600);
   });
});