45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何在基于JavaScript的基础上实现仿京东轮播效果?

如何在基于JavaScript的基础上实现仿京东轮播效果?

2016-03-06 19:02:16 来源:www.45fan.com 【

如何在基于JavaScript的基础上实现仿京东轮播效果?

js实现仿京东图片轮播效果,当鼠标划在窗口上面停止计时器,鼠标离开窗口,开启计时器,鼠标划在页签上面,停止计时器,手动切换,通过定义计时器封装函数run,封装函数changeOption,实现此效果,代码简单易懂,需要的小伙伴直接复制拷贝转走吧。

<!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>

以上代码是不是很简单啊,基于javascrit实现仿金东图片轮播效果就制作成功了,由于时间原因没有给大家展示效果图,还请大家见谅。


本文地址:http://www.45fan.com/bcdm/41476.html
Tags: 实现 JavaScript 基于
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部