原生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进阶教程(第四课第一部分)
Apr 05 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
JS实现躲避粒子小游戏
Jun 18 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
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
php之CodeIgniter学习笔记
2013/06/17 PHP
php邮件发送的两种方式
2020/04/28 PHP
jquery实用代码片段集合
2010/08/12 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python中sys.argv函数精简概括
2018/07/08 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
失业者真诚求职信范文
2013/12/25 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
匿名检举信范文
2015/03/02 职场文书
奔腾年代观后感
2015/06/09 职场文书