慕课 实现图片轮播 代码1

//实现轮播图部分star
$(document).ready(function(){
	var container=document.getElementById("container")
	var imgs=document.getElementById("imgs")
	var circle=document.getElementById("circle").getElementsByTagName("li")
	var prev=document.getElementById("prev")
	var next=document.getElementById("next")
	var index=1
	//var imgWidth=container.offsetWidth
	function showButton(){
		for (var i=0;i<circle.length;i++){
		if (circle[i].className=="current"){
			circle[i].className="";
			break;
		}
		}
		circle[index-1].className="current"     //?
	}
	
	function animate(offset){
		var newLeft=parseInt(imgs.style.left)+offset;
		//注意这个是一个数字，不含px
		imgs.style.left=newLeft+"px";
		if (newLeft<-4130){
			imgs.style.left=0+"px";
		}
		if (newLeft>100){
			imgs.style.left=-4130+"px";
		}
		
	}
	
	 next.onclick=function(){
		 if(index==8){
			 index=1;
		 }
		 else{
			 index+=1;
		 }
		 showButton();
		animate(-590)
	 }
	 
	 prev.onclick=function(){
		 if(index==1){
			 index=8;
		 }
		 else{
			 index-=1;
		 }
		 showButton();
		animate(590)
	 }
	 
	 for (i=0;i<circle.lenght;i++){
		 circle[i].onclick=function(){
			 var myIndex=parseInt(this.index);   //获取自带属性 转化为数字
			 //var myIndex=this.getAttribute("index") 获取自定义属性
			 var offset= -590*(myIndex-index); //每次点击小圆点时的偏移量
			 
			 animate(offset);
			 index=myIndex;
		 }
	 }
//next.onclick=function(){
//		imgs.style.left=parseInt(imgs.style.left)-590+"px";
//	}
//	prev.onclick=function(){
//		imgs.style.left=parseInt(imgs.style.left)-590+"px";
//	}
})
//实现轮播图部分end

<div class="grid-col2-l fl" id="container"> 
<ul class="imgs" id="imgs" style="left:0px">
<li><a href="#"><img src="images/5be7e35bN1a184f0f.jpg" height="480" width="590" alt=""></a></li>  <!--因为鼠标放在当前图片也有点击效果，所以图片外包了一个a-->
<li><a href="#"><img src="images/5be6bfb7Nfaff38b5.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be5878aN270b37b2.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be6573aN329b0238.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be54412Nb1dc3080.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be51fccN3358a3ab.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be80d86N44726e9c.jpg" height="480" width="590" alt=""></a></li>
<li><a href="#"><img src="images/5be91499N0e05ca89.jpg" height="480" width="590" alt=""></a></li>
</ul>

<div class="arrow">
<a href="#" class="arrow-l" id="prev"><</a>
<a href="#" class="arrow-r" id="next">></a>
</div>

<ul class="circle" id="circle">
<li class="current" index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
<li index="5"></li>
<li index="6"></li>
<li index="7"></li>
<li index="8"></li>
</ul>
</div>