原生javascript实现完整的轮播图

轮播图是现在网站网页上最常见的效果之一，我们日常工作可能会使用轮播图插件，可是一旦插件和需求不对等的时候你就需要寻找更符合你要求的插件。那么我们有找插件的功夫还不如自己写一个轮播图，既提升了技术又便于维护。

• 无论我们做什么特效，都要记住一个原则，先写静态的代码，再做动态的处理！

html

         //最外层壳子 
	 

     
	   

                //装图片的壳子
		

		 

		 

		 

		 

		 

		
                //装图片序号的壳子等会根据图片的数量用js动态添加
		

                //左右箭头
		

	          
		  
		
	   

	 

html搭建了一个基础的轮播图框架

现在页面的图片是按顺序展开的

接下来用css给它美化一下

   *{
	 padding:0;
	  margin:0; 
	  list-style:none; 
	  border:0;
	}
    .all{
        width:500px;
        height:200px;
        padding:7px;
        border:1px solid #ccc;
        margin:100px auto;
        position:relative;
    }
    .screen{
        width:500px;
        height:200px;
        overflow:hidden;
        position:relative;
    }
    .screen li{
        width:500px; 
        height:200px; 
        overflow:hidden; 
        float:left;
    }
    .screen ul{ 
    	position:absolute; 
    	left:0; top:0px; 
    	width:3000px;
    }
    .all ol{ 
    	position:absolute; 
    	right:10px; 
    	bottom:10px; 
    	line-height:20px; 
    	text-align:center;
    }
    .all ol li{ 
    	float:left; 
    	width:20px; 
    	height:20px; 
    	background:#fff; 
    	border:1px solid #ccc; 
    	margin-left:10px; 
    	cursor:pointer;
    	border-radius: 50%;
    	color: #999;
    }
    .all ol li.current{ 
    	background:#bfab1f;
    	border: 1px solid #bfab1f;
    	color: #fff;
    }
    #arr {
    	display: none;
    }
    #arr span{ 
    	width:40px; 
    	height:40px; 
    	position:absolute; 
    	left:5px; 
    	top:50%; 
    	margin-top:-20px; 
    	background:#000; 
    	cursor:pointer; 
    	line-height:40px; 
    	text-align:center; 
    	font-weight:bold; 
    	font-family:'黑体'; 
    	font-size:30px; 
    	color:#fff; 
    	opacity:0.3; 
    	border:1px solid #fff;
    }
    #arr #right{
    	right:5px; 
    	left:auto;
    }

美化后的效果：

 

 

 

              注意要给放图片的ul的长度设成3000px