js仿京东轮播图效果

2024-04-27 15:02:18

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/CSS">
       *{margin:0;padding:0;list-style:none;}
       a{text-decoration: none;color: #fff;}
       #Flash{width: 730px;height: 454px;margin: 100px auto;position: relative;cursor: pointer;}
       #pic li{position: absolute;top: 0;left: 0;z-index: 1;display: none;}
       #num{position: absolute;left: 40%;bottom: 10px;z-index: 2;cursor:default;}
       #num li{float: left;width: 20px;height: 20px;border-radius: 50%;background: #666;margin: 3px;line-height: 20px;text-align: center;color: #fff;cursor: pointer;}
       #num li.active{background: #f00;}
       .arrow{height: 60px;width: 30px;line-height: 60px;text-align: center;display: block;position: absolute;top:45%;z-index: 3;display: none;}
       .arrow:hover{background: rgba(0,0,0,0.7);}
       #flash:hover .arrow{display: block;}
       #left{left: 2%;}
       #right{right: 2%;}
   </style>
   <script type="text/javascript">
       function $(id) {
           return typeof id==='string'?document.getElementById(id):id;
       }
       window.onload=function(){
           var index=0;
           var timer=null;
           var pic=$("pic").getElementsByTagName("li");
           var num=$("num").getElementsByTagName("li");
           var flash=$("flash");
           var left=$("left");
           var right=$("right");
           //单击左箭头
           left.onclick=function(){
               index--;
               if (index<0) {index=num.length-1};
               changeOption(index);
           }
           //单击右箭头
           right.onclick=function(){
               index++;
               if (index>=num.length) {index=0};
               changeOption(index);
           }
           //鼠标划在窗口上面，停止计时器
           flash.onmouSEOver=function(){
               clearInterval(timer);
           }
           //鼠标离开窗口，开启计时器
           flash.onmouseout=function(){
               timer=setInterval(run,2000)
           }
           //鼠标划在页签上面，停止计时器，手动切换
           for(var i=0;i<num.length;i++){
               num[i].id=i;
               num[i].onmouseover=function(){
                   clearInterval(timer);
                   changeOption(this.id);
               }
           }
           //定义计时器
           timer=setInterval(run,2000)
           //封装函数run
           function run(){
               index++;
               if (index>=num.length) {index=0};
               changeOption(index);
           }
           //封装函数changeOption
           function changeOption(curindex){
               console.log(index)
               for(var j=0;j<num.length;j++){
                   pic[j].style.display="none";
                   num[j].className="";
               }
               pic[curindex].style.display="block";
               num[curindex].className="active";
               index=curindex;
           }
       }
   </script>
</head>
<body>
   <div id="flash">
       <ul id="pic">
           <li style="display:block"><img src="http://img13.360buyimg.com/da/jfs/t2242/262/578407619/87636/4ffe0c5/56187ed2Nfed9a5b3.jpg" alt=""></li>
           <li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" alt=""></li>
           <li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" alt=""></li>
           <li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" alt=""></li>
           <li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" alt=""></li>
           <li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" alt=""></li>
       </ul>
       <ol id="num">
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
       </ol>
       <a href="Javascript:;" class="arrow" id="left"><</a>
       <a href="javascript:;" class="arrow" id="right">></a>
   </div>
</body>
</html>