原生js实现轮播图


Posted in Javascript onFebruary 27, 2017

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下

CSS:

<style> 
  * { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    text-decoration: none; 
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; 
  } 
   
  body { 
    background: #eee; 
  } 
   
  #Bigbox { 
    width: 720px; 
    height: 420px; 
    border: 1px solid #333; 
    margin: 60px auto; 
  } 
   
  #Box { 
    width: 700px; 
    height: 400px; 
    position: relative; 
    overflow: hidden; 
    top: 10px; 
    left: 10px; 
  } 
   
  #Ul { 
    height: 400px; 
    position: absolute; 
    top: 0; 
    left: 0; 
  } 
   
  #Ul li { 
    width: 700px; 
    height: 400px; 
    float: left; 
  } 
   
  #Left { 
    width: 60px; 
    height: 50px; 
    border-radius: 30%; 
    background: rgba(96, 96, 96, .5); 
    position: absolute; 
    top: 50%; 
    left: 0; 
    margin-top: -25px; 
    color: #fff; 
    line-height: 50px; 
    text-align: center; 
    cursor: pointer; 
    font-size: 20px; 
    display: none; 
  } 
   
  #Right { 
    width: 60px; 
    height: 50px; 
    border-radius: 30%; 
    background: rgba(96, 96, 96, .5); 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin-top: -25px; 
    color: #fff; 
    line-height: 50px; 
    text-align: center; 
    cursor: pointer; 
    font-size: 20px; 
    display: none; 
  } 
</style>

html:

<div id="Bigbox"> 
    <div id="Box"> 
      <ul id="Ul"> 
        <li> 
          1<img src="img/1.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          2<img src="img/2.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          3<img src="img/3.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          4<img src="img/4.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          5<img src="img/5.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          6<img src="img/6.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          7<img src="img/7.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          8<img src="img/8.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          9<img src="img/9.jpg" width="100%" height="100%"> 
        </li> 
        <li> 
          10<img src="img/10.jpg" width="100%" height="100%"> 
        </li> 
      </ul> 
      <div id="Left" onselectstart="return false">左</div> 
      <div id="Right" onselectstart="return false">右</div> 
    </div> 
 </div>

js:

<script> 
 window.onload = function() { 
   var n = 0; 
   var timer = null; 
   var timer1 = null; 
   var timer2 = null; 
   var timer3 = null; 
   var oDiv = document.getElementById('Box') 
   var oUl = document.getElementById('Ul') 
   var oLi = oUl.getElementsByTagName('li') 
    //获取div宽度 
   var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //复制oUl的innerHTML 
   oUl.innerHTML += oUl.innerHTML 
    //设置ul宽度 
   oUl.style.width = oLi.length * oDivWidth + 'px' 
    //获取ul宽度 
   var oUlWidth = getStyle(oUl, 'width').split('px')[0] //封装获取非行间样式函数 
   function getStyle(obj, sName) { 
    if (obj.currentStyle) { 
     return obj.currentStyle[sName]; 
    } else { 
     return getComputedStyle(obj, false)[sName]; 
    } 
   } 
   //执行函数 
   clearInterval(timer3) 
   timer3 = setInterval(function() { 
     Run() 
    }, 2000) 
    //封装运动函数 
   function Run() { 
    clearInterval(timer) 
    timer = setInterval(function() { 
     n -= 20; 
     oUl.style.left = n + 'px' 
     if (n % oDivWidth == 0) { 
      clearInterval(timer3) 
      clearInterval(timer) 
      clearInterval(timer1) 
      timer1 = setTimeout(function() { 
       Run() 
      }, 2000) 
     } 
     if (n <= -oUlWidth / 2) { 
      oUl.style.left = 0; 
      n = 0; 
      clearInterval(timer3) 
      clearInterval(timer) 
      clearInterval(timer1) 
      timer1 = setTimeout(function() { 
       Run() 
      }, 2000) 
     } 
    }, 30) 
   } 
 
   //鼠标移入停止滚动 
   oDiv.onmouseover = function() { 
    Left.style.display = 'block' 
    Right.style.display = 'block' 
    clearInterval(timer3) 
    clearInterval(timer2) 
    timer2 = setInterval(function() { 
     if (n % oDivWidth == 0) { 
      clearInterval(timer) 
      clearInterval(timer1) 
     } 
    }, 30) 
 
   } 
 
   //鼠标移出继续执行 
   oDiv.onmouseout = function() { 
    Left.style.display = 'none' 
    Right.style.display = 'none' 
    clearInterval(timer3) 
    clearInterval(timer2) 
    clearInterval(timer1) 
    timer1 = setTimeout(function() { 
     Run() 
    }, 2000) 
   } 
 
   //向左 
   Left.onclick = function() { 
    //清除所有定时器 
    clearInterval(timer) 
    clearInterval(timer1) 
    clearInterval(timer2) 
    clearInterval(timer3) 
    timer = setInterval(function() { 
     n -= 50; 
     oUl.style.left = n + 'px' 
     if (n % oDivWidth == 0) { 
      clearInterval(timer) 
     } 
     if (n <= -oUlWidth / 2) { 
      oUl.style.left = 0; 
      n = 0; 
     } 
    }, 30) 
   } 
 
   //向右 
   Right.onclick = function() { 
    clearInterval(timer) 
    clearInterval(timer1) 
    clearInterval(timer2) 
    clearInterval(timer3) 
    if (n == 0) { 
     n = -oUlWidth / 2 
    } 
    clearInterval(timer) 
    timer = setInterval(function() { 
     n += 50; 
     oUl.style.left = n + 'px' 
     if (n % oDivWidth == 0) { 
      clearInterval(timer) 
     } 
 
    }, 30) 
   } 
  } 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 #Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 #Javascript
JavaScript中数组Array方法详解
Feb 27 #Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 #Javascript
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
用JQuery调用Session的实现代码
2010/10/29 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
Python实现学生成绩管理系统
2020/04/05 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python集合的新增元素方法整理
2020/12/07 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
社区七一党员活动方案
2014/01/25 职场文书
医院安全生产月活动总结
2014/07/05 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
python OpenCV学习笔记
2021/03/31 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python