原生JS简单的无缝自动轮播

　　最近在不断的加强巩固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了。我这里举例是5张图，实际可以是无数张图，

ul上我也没设置宽度，如果知道图片几张那么直接定死就可以了，那如果就任意张的话就在js代码上设置了。

            #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重新拉回来

也就是将left设置成0；那你可能会问了那如果是这样直接拉回来不会出现闪动吗，事实是不会的。只要我速度够快，寂寞就追不上我。那么代码就可以这么写了

            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);

这样就完成了，可以复制代码在浏览器查看效果。我们也可以在这个基础上继续拓展，比如鼠标移入轮播停止，移出又继续，那这里只需要写个移入清除定时器事件，移出重新开始就可以了。

这个小拓展后又可以再继续拓展，比如在轮播图的两端加个icon，点击左icon轮播向左移动，点击右icon轮播向右，其实也不难，只需要修改left的位置就可以了，有兴趣就去试试吧

转载于:https://www.cnblogs.com/xzhan/p/9702348.html

原生JS简单的无缝自动轮播相关推荐

java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
原生js 移动端无缝衔接轮播图
https://github.com/zhaoyunchong/ApCarousel.git
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下代码如下 Document #container{ overflow:hidden; width:400px; hei ...
H5原生js简单拼图游戏
H5原生js简单拼图游戏演示地址效果展示源码 index.html puzzle.css puzzle.js 源码下载演示地址链接: 演示地址效果展示源码 index.html < ...
原生js简单实现五指棋
原生js简单实现五指棋无聊之时可以玩玩,浏览器直接打开,简单又不失趣味! 如图: 上代码: <div id="bigBackground"><!-- 棋盘水平线 ...
原生 js 实现无缝滚动轮播
上一次我们看了如何实现简单的轮播图,以及各种常用的效果实现: 这一次,我们看看无缝滚动轮播图的实现(利用左边的margin 来实现): 原理: 我们创建一个div,下图共红色部分:然后再div中创建 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

原生JS简单的无缝自动轮播

原生JS简单的无缝自动轮播相关推荐

最新文章

热门文章