原生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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery基础知识小结
Dec 22 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
js实现自定义右键菜单
May 18 Javascript
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 include加载文件两种方式效率比较
2010/08/08 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PDO::setAttribute讲解
2019/01/29 PHP
javascript jQuery插件练习
2008/12/24 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
六一儿童节活动策划方案
2014/01/27 职场文书
晚会主持词开场白
2014/03/17 职场文书
成立公司计划书
2014/05/07 职场文书
法学求职信
2014/06/22 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python