首页 > 代码库 > 轮播图

轮播图

2024-09-05 19:31:06   217人阅读

HTML和css

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/css">  

 *{    padding:0;    margin:0;   }   

.box{    width:600px;    height:320px;    margin: auto;    position: relative;

  }  

 .box img{    width:610px;    height:330px;    border:3px  solid #ccc;    box-shadow:5px 5px 5px #666;    position:absolute;    left:0;    top:0;    margin:auto;    display: none;   }   

#picture .first{    display:block;   }   

#point{    width:150px;    height:20px;    border-radius:5px;    background:green;    opacity: 0.6;    filter:alpha(opacity=60);    position:absolute;    left:0;    right:0;    bottom:0;    margin:auto;    margin-bottom: 20px;   }   

span{    display:inline-block;    height:10px;    width:10px;    border-radius:50%;    background:#000;    margin-left:11px;   }   .list{    background: red;   }  

 .box #picture a{    text-decoration:none;    color:#eee;    line-height:40px;    width:25px;    height:40px;    background:rgba(0,0,0,.4 );    position:absolute;    /*因为父集加了position定位，这里不加定位会被覆盖掉*/    display:block;    top:0;    bottom:0;    margin:auto;    text-align:center;    font-size:30px;    border-radius:5px;      }   #left{    left:10px;   }   #right{    right:10px;   }   #shuzi{color:#f00;background:none;}   

.btm{margin-left:48%;margin-top: 20px}  

</style>

</head>

<body>  

<div class="box">    

 <div id ="picture">    

<img class="first" src="http://www.mamicode.com/images/green.jpg" />  

  <img src="http://www.mamicode.com/images/bird.gif" />    

<img src="http://www.mamicode.com/images/yuanxiao.jpg" />    

<img src="http://www.mamicode.com/images/hehua.jpg" />    

<img src="http://www.mamicode.com/images/spring.jpg" />    

<a id="left" href="javascript:;">&lt;</a>    

<a id="right" href="javascript:;">&gt;</a>   

</div>      

<div id ="point">   

 <span class="list">

</span>    

<span></span>   

 <span></span>    

<span></span>   

 <span></span>     

 </div>  </div>    

<div class="btm">

<span id="shuzi">1</span>/5</div>     

<script type="text/javascript" src="http://www.mamicode.com/demo3.css">   

 </script>

</body>

</html>

 

js代码：

var oPicture=document.getElementById("picture");//picture为字符串
  var oImg = oPicture.getElementsByTagName("img");
  var oPoint=document.getElementById("point");
  var oSpan = oPoint.getElementsByTagName("span");
  var oRight=document.getElementById("right");
  var oLeft=document.getElementById("left");
  var oShuzi=document.getElementById("shuzi");
  var k=0;

for( var i=0;i<oSpan.length;i++ ){     oSpan[i].index = i;     oSpan[i].onclick = function(){      k = this.index;      tab();     }    }    oLeft.onclick=function(){     k--;     if(k<0){      k=4;           }     tab();    }    oRight.onclick=function(){     k++;     if (k>oSpan.length-1){      k=0;     }     tab();    }    function tab(){for( var j=0;j<oSpan.length;j++ ){       oSpan[j].className = "";       oImg[j].className = "";      }      oSpan[k].className = "list";      oImg[k].className = "first";      oShuzi.innerHTML = k+1;    }

              

              

轮播图


联系
我们