原生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 相关文章推荐
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
js倒计时抢购实例
Dec 20 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
JS实现简易留言板(节点操作)
Mar 16 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
菜鸟修复电子管记
2021/03/02 无线电
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
jQuery学习基础知识小结
2010/11/25 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
市场营销策划方案
2014/06/11 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
会计实训报告范文
2014/11/04 职场文书
2014年电工工作总结
2014/11/20 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏