脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 仿京东图片轮播

基于JavaScript实现仿京东图片轮播效果

 更新时间：2015年11月06日 15:43:05   作者：七秒钟记忆~  
这篇文章主要介绍了基于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">&lt;</a>
    <a href="javascript:;" class="arrow" id="right">&gt;</a> 
  </div>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • GreyBox技术总结（转）

    GreyBox技术总结（转）

    GreyBox是一个遮罩层的组件也称模式窗口或模态窗口（所谓模态窗口，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的窗口），它运行以后可以产生不错的界面。
    2010-11-11
  • JavaScript中DOM操作常用事件总结

    JavaScript中DOM操作常用事件总结

    这篇文章主要为大家详细介绍了JavaScript中常用的几个DOM事件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-04-04
  • Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    这篇文章主要介绍了Boostrap栅格系统与自己额外定义的媒体查询的冲突问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • JavaScript引入方式深入解读

    JavaScript引入方式深入解读

    这篇文章主要介绍了JavaScript引入方式案例,结合实例形式分析了JavaScript引入方式特性与相关操作技巧,需要的朋友可以参考下
    2022-07-07
  • JS实现浏览器菜单命令

    JS实现浏览器菜单命令

    JS实现浏览器菜单命令...
    2006-09-09
  • js 创建对象的多种方式与优缺点小结

    js 创建对象的多种方式与优缺点小结

    这篇文章主要介绍了js 创建对象的多种方式与优缺点，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
    2021-03-03
  • cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx中的骨骼动画在程序中使用非常方便，从编辑器(cocostudio或flash插件dragonBones)得到xml或json数据，调用代码就可以直接展示出动画效果，下面通过本篇文章给大家分享cocos2dx骨骼动画Armature源码剖析，需要的朋友一起来学习吧。
    2015-09-09
  • input输入框限制只能输入数字的方法实例(个人认为最好的)

    input输入框限制只能输入数字的方法实例(个人认为最好的)

    在很多业务中需要对输入框进行字符限制,比如金额输入框、手机号码输入框等,下面这篇文章主要给大家介绍了关于input输入框限制只能输入数字的相关资料,文中介绍的方法个人认为最好的,需要的朋友可以参考下
    2022-10-10
  • 基于webpack-hot-middleware热加载相关错误的解决方法

    基于webpack-hot-middleware热加载相关错误的解决方法

    下面小编就为大家分享一篇基于webpack-hot-middleware热加载相关错误的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Jil,高效的json序列化和反序列化库

    Jil,高效的json序列化和反序列化库

    下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02

最新评论