制作轮播图代码

html部分

<div class="grid-col2-left container">
					     <div id="list" style="left: -590px;">
					        <img src="img/5bc6c696Nee225432.jpg" />
					        <img src="img/5bc71c2bNb186f591.jpg"/>
					        <img src="img/5bc84582N276ea7fb.jpg" />
					        <img src="img/39de3be29f78d051.jpg" />
					        <img src="img/6030c9f06e5a06a6.jpg" />
					        <img src="img/912c56c3ec197689.jpg" />
					        <img src="img/39de3be29f78d051.jpg" />
					        <img src="img/5bc71c2bNb186f591.jpg"/>
					        <img src="img/5bc84582N276ea7fb.jpg" />
					        <img src="img/6030c9f06e5a06a6.jpg" />
					    </div>
					    <div id="buttons">
					        <span index="1" class="on"></span>
					        <span index="2"></span>
					        <span index="3"></span>
					        <span index="4"></span>
					        <span index="5"></span>
					        <span index="6"></span>
					        <span index="7"></span>
					        <span index="8"></span>
					    </div>
					    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
					    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

CSS样式

.container{
	width: 590px; 
	height: 100%; 
	overflow: hidden;
    position: relative;
    }
#list {
	 width: 5900px;
	 height: 100%; 
	 position: absolute; 
	 z-index: 1;
 }
#list img{ float: left;}
#buttons { 
	position: absolute; 
	height: 10px; 
	width: 200px; 
	z-index: 2; 
	bottom: 30px; 
	left: 40px;
}
 #buttons span   {
   cursor: pointer; 
   float: left; 
   border: 2px solid #b9beba;
   width: 8px; height: 8px; 
   border-radius: 50%; 
   margin-right: 5px;
   }
#buttons .on {  background:#fff;}
.arrow { 
	cursor: pointer; 
	line-height: 39px; 
	text-align: center; 
	font-size: 20px; 
	width: 20px;
	height: 40px;  
	position: absolute; 
	z-index: 2; 
	top: 50%; 
	background-color: rgba(0,0,0,.15);
	color: #fff;
    }
.arrow:hover { background-color: RGBA(0,0,0,.7); }
#prev { left: 0;}
#next { right: 0;}

Javascript脚本文件

 window.onload=function(){
            var container = document.getElementById("container");
            var list = document.getElementById("list");
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;//显示小圆点
            var animated = false;
            var interval=2000;
            var timer;
           
            function animate(change){
            	animated=true;
            	var newleft=parseInt(list.style.left)+change;
            	var time=100;//位移总时间
            	var interval=50;//位移间隔时间
            	var speed=change/(time/interval);//每次位移量
            	function go(){
            		if((speed < 0 && parseInt(list.style.left)>newleft)||(speed > 0&&parseInt(list.style.left)<newleft)){
            			list.style.left=parseInt(list.style.left)+speed+"px";	
            		    setTimeout(go,interval);
            		}
            		
            		else{
            			
            			list.style.left=newleft+"px";
		            	if(newleft>-590)
		            	{
		            		list.style.left= -5310+"px";
		            	}
		            	if(newleft<-5310)
		            	{
		            		list.style.left=-590+"px";
		            	}
		            	animated=false;
		            }	
               
            	} go();
            }
                  
            function showbutton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == "on"){
                        buttons[i].className = "";
                        break;
                    }
                }
                buttons[index - 1].className = "on";
            }
            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }
            //左箭头
            prev.onclick=function(){
            	if(index==1){
            		index=8;
            	}
            	else{
            		index -=1;
            	}
            	showbutton();
            	if(animated==false){
            		animate(590);
            	}
            }
            //右箭头
            next.onclick=function(){
            	if(index==8){
            		index=1;
            	 }
            	else{
            		index +=1;
            	}
            	showbutton();
            	if(animated==false){
            	animate(-590);
            }
            }
            //小圆点点击事件
             for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == "on") {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute("index"));
                    var change= -590 * (myIndex - index);

                    animate(change);
                    index = myIndex;
                    showbutton();
                }
            }

            container.onmouseover = stop;
            container.onmouseout = play;

            play();

        }
        
    </script>