无缝滚动的三种写法（简易版）
2016-08-28 本文已影响643人
编程小飞侠
第一种：利用css3中的自定义动画animation所形成的无缝滚动
（相对来说比较简单）
代码如下：
<style>
#wrap{width:496px;height:100px;border:2px solid #000;margin:50px auto;position: relative;overflow: hidden;}
#wrap .list{position: absolute;top:0;left:0;width:992px;height:100px;animation:3s move infinite linear;}
#wrap .list li{width:98px;height:98px;background: #000;border:1px solid #fff;float: left;line-height: 98px;text-align: center;font-size: 20px;color:#fff;border-right:none;}
@keyframes move{
0%{
}
100%{
transform:translate(-496px,0);
//也可以设置left值为-496px；
}
}
</style>
<body>
<div id="wrap">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
效果示意图
4619317069.gif
第二种：原生js版的无缝滚动
代码如下：
<style>
#wrap{width:400px;height:100px;border: 2px solid #000;margin: 50px auto;position: relative;overflow: hidden;}
#wrap ul{position: absolute;top:0;left:0;}
#wrap ul li{width:98px;height:98px;margin: 1px;float: left;}
#wrap img{width:98px;height:98px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('wrap');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oDiv.getElementsByTagName('li');
//动态设置ul的内容以及宽度
oUl.style.width=oDiv.offsetWidth*2+'px';
oUl.innerHTML+=oUl.innerHTML;
setInterval(function(){
//可以通过设置速度的正负性来控制运动的方向，这里没有写出
if(oUl.offsetLeft<-(oUl.offsetWidth/2)){
oUl.style.left=0;
}
else if(oUl.offsetLeft>0){
oUl.style.left=-(oUl.offsetWidth/2)+'px';
}
oUl.style.left=oUl.offsetLeft-6+'px';
},30);
}
</script>
</head>
<body>
<div id="wrap">
<ul>
<li><img src="about1.jpg"></li>
<li><img src="about2.jpg"></li>
<li><img src="about3.jpg"></li>
<li><img src="about4.jpg"></li>
</ul>
</div>
</body>
效果示意图
8107437984.gif
第三种：jQuery版的无缝滚动
代码如下：
<style>
#wrap{width:400px;height:100px;border: 2px solid #000;margin: 50px auto;position: relative;overflow: hidden;}
#wrap ul{position: absolute;top:0;left:0;}
#wrap ul li{width:98px;height:98px;margin: 1px;float: left;}
#wrap img{width:98px;height:98px;}
</style>
<script src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
var oDiv=$('#wrap');
var oUl=$('ul');
var aLi=$('li');
oUl.width(oDiv.innerWidth()*2.001);
oUl.html(oUl.html()+oUl.html());
setInterval(function(){
if(oUl.position().left<-(oUl.innerWidth()/2)){
oUl.css('left',0);
}else if(oUl.position().left>0){
oUl.css('left',-(oUl.innerWidth()/2)+'px');
}
oUl.css('left',oUl.position().left-6+'px');
},30);
})
</script>
</head>
<body>
<div id="wrap">
<ul>
<li><img src="about1.jpg"></li>
<li><img src="about2.jpg"></li>
<li><img src="about3.jpg"></li>
<li><img src="about4.jpg"></li>
</ul>
</div>
</body>
jQuery版我是仿照js版，因此逻辑思维一致，效果一样
效果示意图
8107437984.gif
