一个简单的轮播图

个人认为轮播图主要是注意控制的移动的css样式
<!DOCTYPE html>
<html>
	<head>
		<title>good</title>
		<style>
			*{
	       padding:0px;
	       margin:0px;
       }
      #main
      {
	       width:1280px;
	       height:500px;
	       margin:20px auto;
	       position:relative;
      }
      .list
      {
	       width:1280px;
	       height:500px;
         position:absolute;
	       top:0px;
      }

      #all
      {
       	 width:1050px;
	       height:15px;
	       margin:auto;
	       position:relative;
	       top:-100px;
	       z-index:2000;
      }
      .ctrl 
      {
       	width:148px;
	      height:15px;
	      margin-right:2px;
	      background-color:rgba(128,255,255,0.8);
	      float:left;
      }
      .active,.ctrl:hover
      {
	      background-color:rgba(255,57,57,0.8);
      }
      .show
      {
      	z-index:1000;
      }//主要是 show和active的移动
		</style>
		<meta charset="utf-8">
	</head>
	<body>
		
     <div id="main">
         <div class="list show"><img src="index/1.jpg"></div>
         <div class="list"><img src="index/2.jpg"></div>
         <div class="list"><img src="index/3.jpg"></div>
         <div class="list"><img src="index/4.jpg"></div>
         <div class="list"><img src="index/5.jpg"></div>
         <div class="list"><img src="index/6.jpg"></div>
         <div class="list"><img src="index/7.jpg"></div>		   
     </div>
     
     <div id="all">
     	    <div class="ctrl active" onclick="out(0)"></div>
     	    <div class="ctrl" onclick="out(1)"></div>
     	    <div class="ctrl" onclick="out(2)"></div>
     	    <div class="ctrl" onclick="out(3)"></div>
     	    <div class="ctrl" onclick="out(4)"></div>
     	    <div class="ctrl" onclick="out(5)"></div>
     	    <div class="ctrl" onclick="out(6)"></div>
     </div>
     <script>
     	  var x;
        var index=document.getElementsByClassName("list");//获取图片
        var ctrl=document.getElementsByClassName("ctrl");//获取按钮

        var goindex=function()
        {
	         var i;
       	/*清除show和active*/
	         for(i=0;i<index.length;i++)
	         {
		         index[i].className="list";
	         } 
         	for(i=0;i<ctrl.length;i++)
	        {
		         ctrl[i].className="ctrl";
	        }
	        /*确定展示的图片和按钮*/
         	index[x].className="list show";
	        ctrl[x].className="ctrl active";
        }
        /*通过按钮函数获得控制*/
        function out(n)
        {
	        x=n;
          goindex();
        }
     </script>
  	</body>
</html>

更多推荐

菜鸟教程js