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


Posted in Javascript onNovember 06, 2015

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实现仿金东图片轮播效果就制作成功了,由于时间原因没有给大家展示效果图,还请大家见谅。

Javascript 相关文章推荐
js读写(删除)Cookie实例详解
Apr 17 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
实现非常简单的js双向数据绑定
Nov 06 #Javascript
浅析javascript中的事件代理
Nov 06 #Javascript
详解javascript中的事件处理
Nov 06 #Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 #Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 #Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 #Javascript
javascript如何实现暂停功能
Nov 06 #Javascript
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php数据序列化测试实例详解
2017/08/12 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python实现烟花小程序
2019/01/30 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python超时重新请求解决方案
2019/10/21 Python
Python实现快速排序的方法详解
2019/10/25 Python
Python实现图片添加文字
2019/11/26 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
了解一下python内建模块collections
2020/09/07 Python
python复合条件下的字典排序
2020/12/18 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
网络技术专业求职信
2014/02/18 职场文书
初中班级口号
2014/06/09 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
辞职书格式样本
2015/02/26 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
Python基础之pandas数据合并
2021/04/27 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
Nginx的基本概念和原理
2022/03/21 Servers