javascript 图片轮播效果

类似于淘宝首页广告图片轮播图效果，同时，点击左右箭头及下方数字键可进行切换图片

javascript 图片轮播效果

1、HTML

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/style.css"/>
   </head>
   <body>
       <div id="box">
           <img src="img/1.jpg" id="pic"/>
           <ul id="list">
               <li>1</li>
               <li>2</li>
               <li>3</li>
           </ul>
           <div id="left" class="bt"><</div>
           <div id="right" class="bt">></div>
       </div>
   </body>
   <script src="js/loop.js" type="text/javascript" charset="utf-8"></script>
</html>

2、CSS样式

图片是扒的淘宝的图，宽和高根据图片的实际大小进行修改

*{
   margin: 0;
   padding: 0;
}
#box{
   width: 520px;
   height: 260px;
   margin: 0 auto;
   position: relative;
}
.bt{
   width: 50px;
   height: 80px;
   background-color: rgba(0,0,0,0.2);
   color: #fff;
   line-height: 80px;
   text-align: center;
   position: absolute;
   top:100px;
   display: none;
}
#left{
   left: 0;
}
#right{
   right: 0;
}

#list{
   list-style: none;
   position: absolute;
   bottom: 20px;
   left: 250px;
}
#list li{
   float: left;
   width: 20px;
   height: 20px;
   background-color: #aaa;
   margin-left: 10px;
   line-height: 20px;
   text-align: center;
   border-radius: 50%;
}

3、js部分

jsLeft.addEventListener(onmouseout,lightColor,false)
jsRight.addEventListener(onmouseout,lightColor,false)
function lightColor(){
this.style.backgroundColor = "rgba(0,0,0,0.2)"
}

jsRight.addEventListener("click",nextPage,false)
function nextPage(){
   currentPage++
   changePage()
}
jsLeft.addEventListener("click",frontPage,false)
function frontPage(){
   currentPage--
   changePage()
}

//进入小圆点
for(var i=0;i<jsLisArr.length;i++){
   jsLisArr[i].index = i+1
   jsLisArr[i].addEventListener("mouseover",function(){
       currentPage = parseInt(this.index)
       changePage()
   },false)
}

javascript 图片轮播效果

相关推荐