js仿京东轮播图效果

<!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%;background-color: rgba(0,0,0,0.3);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" ></li>
           <li><img src="http://img13.360buyimg.com/da/jfs/t2143/111/577347825/96150/e27180bd/561889b3N42ee62b5.jpg" ></li>
           <li><img src="http://img20.360buyimg.com/da/jfs/t1825/234/1750370913/97529/b9229832/560b5ad3N054605f7.jpg" ></li>
           <li><img src="http://img10.360buyimg.com/da/jfs/t2026/215/573306345/95654/a0211937/5618a735N1b3d8423.jpg" ></li>
           <li><img src="http://img20.360buyimg.com/da/jfs/t2065/362/579832759/78899/6f349917/5618c680N3752bacc.jpg" ></li>
           <li><img src="http://img10.360buyimg.com/da/jfs/t2023/45/384256123/101565/9b6e5daf/5604bdceN8c7d2ccf.jpg" ></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>

时间： 2024-11-06 22:07:04

js仿京东轮播图效果

js仿京东轮播图效果的相关文章

第31天：动态生成节点-京东轮播图创建

JS学习笔记--轮播图效果

第一阶段：前端开发_使用JS完成首页轮播图效果

Javascript 京东轮播图

原生js点击轮播图效果

原生js仿网易轮播图

js实现轮播图效果(附源码)--原生js的应用

使用原生js实现轮播图效果

js 实现淘宝轮无缝播图效果，带完整解析版源码（陆续更新中.....）