原生JS实现简单的无缝自动轮播效果


Posted in Javascript onSeptember 26, 2018

最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大。

万丈高楼平地起,基础打扎实了学什么都快,而且我觉得用原生的代码写完好像自己有点小成就感的。现在记录一下今天复习的原生js无缝轮播吧。

先上一张自拍镇楼,哈哈哈

首先先说一下思路吧,首先任意张图片以ul的形式保存显示,上代码吧

<div id="wrap">
  <ul id="ul">
    <li>
      <img src="http://img3.imgtn.bdimg.com/it/u=1135520735,2369294998&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=695607252,2370769232&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img4.imgtn.bdimg.com/it/u=4133407901,1533904167&fm=200&gp=0.jpg">
    </li>
    <li>
      <img src="http://img5.imgtn.bdimg.com/it/u=4083237979,1376579798&fm=26&gp=0.jpg">
    </li>
    <li>
      <img src="http://img2.imgtn.bdimg.com/it/u=1640379911,3259036309&fm=26&gp=0.jpg">
    </li>
  </ul>
</div>

图片轮播的话我是让整个ul移动显示,而不是更改li的margin,上css代码,因为一张图片设置是80px;所以容器的width就是400了。       

#wrap{
        width: 400px;
        height: 80px;
        overflow: hidden;
        margin-left: 500px;
        margin-top: 300px;
        position: relative;
      }
      #ul{
        position: absolute;
        left: 0;
        top: 0;
        width: 400px;
        font-size: 0;
        margin: 0;
        padding: 0;
      }

然后js代码就很简单了,直接设置一个定时器,让ul缓慢的右移或者左移就可以了。但是会有一个问题,我们等下再讨论,先附上代码

window.onload = function(){
  var odiv = document.getElementById('wrap');
  var oul = document.getElementById('ul');
  setInterval(function(){
    oul.style.left = oul.offsetLeft + 5 +'px';
  },30)

但是图片往右走了就回不了头了,上面的代码只是让图片一直往左移动,那怎么实现当最后一张图片移动到左边缘时第一张图片重新显示,其实很简单

比如图片是1、2、3、4这么显示,那么我们多一份图片不就可以了,也就是说1、2、3、4、1、2、3、4,然后当第2组图片显示到4的时候,我们将ul重新拉回来

那么代码就可以这么写了         

var odiv = document.getElementById('wrap');
      var oul = document.getElementById('ul');
      var oli = oul.getElementsByTagName('li');
      oul.innerHTML = oul.innerHTML + oul.innerHTML;//拼接li,因为图片可能是任意张
      oul.style.width = oli[1].offsetWidth * oli.length + 'px';//ul的宽度等于所有图片宽度的总和
    setInterval(function(){
      if (oul.offsetLeft < -oul.offsetWidth/2) {
        oul.style.left = 0;//如果ul已经显示完了一组,也就是宽度的一半,那么就把他拉回来重新轮播
      }else{
        oul.style.left = oul.offsetLeft - 2 +'px';
      }
    },30);

这样就完成了,可以复制代码在浏览器查看效果。

总结

以上所述是小编给大家介绍的原生JS实现简单的无缝自动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 处理null及null值示例
Jun 09 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue中控制v-for循环次数的实现方法
Sep 26 #Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 #Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 #Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 #Javascript
在vue 中使用 less的教程详解
Sep 26 #Javascript
vue如何进行动画的封装
Sep 26 #Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 #Javascript
You might like
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python 检查文件mime类型的方法
2018/12/08 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
企业管理培训感言
2014/01/27 职场文书
岗位职责风险防控
2014/02/18 职场文书
语文教学随笔感言
2014/02/18 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
2014年校长工作总结
2014/12/11 职场文书
党员思想汇报材料
2014/12/19 职场文书
会计求职信怎么写
2015/03/20 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电