基于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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP 代码规范小结
2012/03/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
用python制作游戏外挂
2018/01/04 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
python实现文本界面网络聊天室
2018/12/12 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
护理自我鉴定范文
2013/10/06 职场文书
写给女生的道歉信
2014/01/14 职场文书
入党自我评价范文
2014/02/02 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
环保倡议书范文
2014/05/12 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS