基于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 相关文章推荐
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
js字符编码函数区别分析
Dec 28 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
jQuery cdn使用介绍
May 08 Javascript
javascript实现密码强度显示
Mar 18 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
实例讲解PHP表单
2020/06/10 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
Python三元运算实现方法
2015/01/12 Python
python实现简易云音乐播放器
2018/01/04 Python
浅析Python数据处理
2018/05/02 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
详解Python_shutil模块
2019/03/15 Python
flask 实现token机制的示例代码
2019/11/07 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
八年级音乐教学反思
2014/01/09 职场文书
团员自我评价范文
2015/03/10 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
离婚民事起诉状
2015/08/03 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL