js实现无缝无限循环轮播图片

如果有问题或者更好的方法，欢迎留言

效果图如下：

具体代码见下面：

<!DOCTYPE>
<html>
<head>
<title>06</title>
<meta charset="utf-8">
<script>
window.onload = function () {var ul = document.getElementById("ul");var ul1 = document.getElementById("ul1");var pic = ul.getElementsByTagName("div");var pic1 = ul1.getElementsByTagName("div");var name = ['智能摄像头','智能门锁','智能抄表','智能路灯','智能消防','智能停车','智能井盖','智能烟感','智慧农业','智能家居'];for (var i=0;i<pic.length;i++){pic[i].style.background="url('./simid/"+name[i]+".png')";pic1[i].style.background="url('./simid/"+name[i]+".png')"};setInterval(move, 1000);function move() {ul.style.left=ul.offsetLeft-50+"px";ul1.style.left=ul1.offsetLeft-50+"px";if(ul.offsetLeft<=-600){ul.style.left=600+"px";}if(ul1.offsetLeft<=-600){ul1.style.left=600+"px";}}
}</script>
<style>
html,body{
margin:0
}
.animation{
overflow:hidden;
width: 400px;
position: relative;
top:50px;
height:220px;
display: flex;
}
#ul{
flex-shrink: 0;
position:absolute;
width: 600px;
height:220px;
display: flex;
}
#ul1{
flex-shrink: 0;
position:absolute;
left: 600px;
width: 600px;
height:220px;
display: flex;
}
#ul div,#ul1 div{flex-shrink: 0; width: 100px; text-align:center; line-height:220px; font-size: 24px; color: #FFFFFF;}
</style>
</head>
<body>
<div class="animation"><div id="ul"><div>智能摄像头</div><div>智能门锁</div><div>智能抄表</div><div>智能路灯</div><div>智能消防</div><div>智能停车</div></div><div id="ul1"><div>智能摄像头</div><div>智能门锁</div><div>智能抄表</div><div>智能路灯</div><div>智能消防</div><div>智能停车</div></div>
</div>
</body>
</html>

js实现无缝无限循环轮播图片相关推荐

利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
Android之ViewPager实现图片无限循环轮播
很久没有写博客了,之前花时间写了一个Viewpager实现的无限图片轮播,个人感觉还是很好用的QAQ,源码和思路都还算清晰实现的效果图如下: 这里要补充一下,在这个项目中我把图片轮播写进了一个Vie ...
html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
一种无限循环轮播图的实现原理
本文来自 http://www.jianshu.com/p/ef03ec7f23b2 轮播实现步骤接下来,笔者将从各方面逐一分析层级结构最底层是一个UIView,上面有一个UIScrollVie ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
html图片自动循环轮播图,js实现图片无缝循环轮播
本文实例为大家分享了js实现图片无缝循环轮播的具体代码,供大家参考,具体内容如下代码如下 Document #container{ overflow:hidden; width:400px; hei ...
iOS无限轮播图片的两种方式
2019独角兽企业重金招聘Python工程师标准>>> 1 使用UIScrollview实现无限轮播原理在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在 ...
css+js制作循环轮播图——可滑动
先上效果图: (1)自动切换 (2)手动拖拽 HTML <div id="adbox" class="adbar"><img src=&quo ...
HTML用循环显示名言,网页特效丨标题栏文字循环轮播的js特效 - 网页特效代码大全_网页特效集锦_站长素材站...
标题栏文字循环轮播的js特效 var message = new Array(); message[0] = "欢迎光临站长素材站"; message[1] = "这里有 ...
html5时间线图片自动轮播,js实现自动播放匀速轮播图
本文实例为大家分享了js实现自动播放匀速轮播图的具体代码,供大家参考,具体内容如下函数封装:( 匀速运动函数) function animate(obj,target,step,speed){ cl ...

js实现无缝无限循环轮播图片

js实现无缝无限循环轮播图片相关推荐

最新文章

热门文章