例子：轮播效果 

<style type="text/css">
    	.img{display:none;}
		#dian{ width:300px; height:20px; position:relative;  top:-30px; left:400px }
		.yuan{width:20px; height:20px; background-color:#FFF; border:2px solid #0F6; border-radius:100px; float:left; margin-left:10px}
		
    </style>
    </head>
    

    <body>
    	<div style="width:600px; height:300px;">
        	<img style=" display:block;" class="img" src="../图片/3be319b6-ca5c-43a9-b988-12479b42999a.jpg"  width="600px" height="300"/>
            <img class="img" src="../图片/9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="600px" height="300" />
            <img class="img" src="../图片/44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg"  width="600px" height="300" />
            <img class="img" src="../图片/77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg"  width="600px" height="300"/>
            <img class="img" src="../图片/85a669b8-879e-40c8-95e8-487854bde435.jpg" width="600px" height="300" />
        </div>
        
        
        <div id="dian">
        	<div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>
            <div bs="1"  class="yuan" onclick="xianshi(this,'1')"></div>
            <div bs="2"  class="yuan" onclick="xianshi(this,'2')"></div>
            <div bs="3"  class="yuan" onclick="xianshi(this,'3')"></div>
            <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>
            
        </div>
    </body>


    <script type="text/javascript">
	//图片索引
	var sy=0;
	//间隔时间
	window.setInterval("Huan()","4000");
	    //掉一下换一个
    	function Huan()
		{
		var img=document.getElementsByClassName("img");
		sy++;  //索引加1
		//判断到了最后一张
		if(sy>=img.length)
		{
		    sy=0;
		}

		//让所有隐藏
		for(var i=0;i<img.length;i++)
		{
		 img[i].style.display="none";	
		}
		//让下一张显示
		img[sy].style.display="block";
			
		//换圆点的样式
		var yuan = document.getElementsByClassName("yuan");
			
		for(var j=0;j<yuan.length;j++)
		{
		    if(yuan[j].getAttribute("bs")==sy)
		  {
		   yuan[j].style.borderColor = "red";
		  }
		else
		   {
		      yuan[j].style.borderColor = "#0F6";
		   }
	         }
		}
		
		function xianshi(t,s)
		{    
		    sy=s;
		    var img = document.getElementsByClassName("img");
			//让所有隐藏
			for(var i=0;i<img.length;i++)
			{
				img[i].style.display="none";
			}
			//让下一张显示
			img[s].style.display="block";
			//改自身样式
			var yuan = document.getElementsByClassName("yuan");
			
			for(var j=0;j<yuan.length;j++)
			{
				yuan[j].style.borderColor="#0F6";
			}
			
			t.style.borderColor="red";
		}
		
    </script>

　　

posted @ 2016-11-13 19:15  悦~  阅读(183)  评论(0)  编辑  收藏  举报