慕课实现图片轮播代码1

小灰灰 2022-04-13 06:12 262阅读 0赞

//实现轮播图部分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