原生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 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
vue-cli3 配置开发与测试环境详解
May 17 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 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的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
Python IDE PyCharm的基本快捷键和配置简介
2015/11/04 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
python PyTorch预训练示例
2018/02/11 Python
Python之文字转图片方法
2018/05/10 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
知识竞赛活动方案
2014/02/18 职场文书
论文指导教师评语
2014/04/28 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang