基于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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
js登录弹出层特效
Mar 07 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
实现非常简单的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
Sony CFR 320 修复改造
2020/03/14 无线电
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
python列表的常用操作方法小结
2016/05/21 Python
Python代码实现KNN算法
2017/12/20 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python3.4中清屏的处理方法
2020/07/06 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
对标管理实施方案
2014/03/12 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
python 离散点图画法的实现
2022/04/01 Python