首页 > 代码库 > 分别用css3、JS实现图片简单的无缝轮播功效
分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3、JS实现图片简单无缝轮播功效；
一、使用CSS3实现：利用animation属性
（实现一张一张的轮播，肉眼只看见一张图片）
HTML部分比较简单，两个div下包着几个img标签；为了实现无缝轮播，注意第一张图片要与最后一张图片相同；
<div class="out">
<div class="imgs">
<img src="http://www.mamicode.com/img/beatuy.jpg"/>
<img src="http://www.mamicode.com/img/child.jpg"/>
<img src="http://www.mamicode.com/img/girl.jpg"/>
<img src="http://www.mamicode.com/img/milk.jpg"/>
<img src="http://www.mamicode.com/img/cup.jpg"/>
<img src="http://www.mamicode.com/img/dog.jpg"/>
<img src="http://www.mamicode.com/img/beatuy.jpg"/>
</div>
</div>
最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言；
CSS代码如下：
1 .out{
2 width: 200px;
3 height: 100px;
4 overflow: hidden;
5 position: relative;
6 }
7 .imgs{
8 width: 1400px;
9 height: 100px;
10 position: absolute;
11 animation: ppt 10s linear infinite;
12 }
13
14 img{
15 float: left;
16 width: 200px;
17 height: 100px;
18 }
19 @keyframes ppt{
20 0%{left:0px}
21 20%{left:-250px}
22 40%{left:-500px}
23 60%{left:-750px}
24 80%{left:-1000px}
25 100%{left:-1200px}
26 }
这样图片就可以轮播了，但是鼠标放上去的时候图片还是一直在轮播的，如果我们想让鼠标放在图片上时，轮播停止，或者出现一些信息，我们需要加上：hover;设置动画的状态，代码很简洁：如下
1 .out:hover .imgs{ 2 animation-play-state:paused 3 }
这样我们的轮播效果就出来啦；
效果图什么的也懒得贴了；
二、使用JS实现：利用定时器setInterval
（多张图片轮播，肉眼可以看到多张图片）
同样HTML部分比较简单，需要设置外层DIV ovflow:hidden;之所以每个div既有class，也有id,是因为样式我是通过class控制的，DOM是通过ID获取的
1 <div class="out" id="out"> 2 <div class="main" id=‘main‘> 3 <div class="pic" id="pic"> 4 <img src="http://www.mamicode.com/img/0.jpg"/> 5 <img src="http://www.mamicode.com/img/6.jpg"/> 6 <img src="http://www.mamicode.com/img/hehua2.2.png"/> 7 <img src="http://www.mamicode.com/img/tupian1.png"/> 8 </div> 9 <div class="copyPic" id="copyPic"> 10 11 </div> 12 </div>
可以看到class="copyPic" 的DIV为空的，没有内容，不急，在JS部分会为他赋上内容，其内容与class="pic"的一样；当然我们也可以直接在HTML中为其添加内容；现在为其加上一点CSS样式吧
1 .out{
2 width: 820px;
3 overflow: hidden;
4 }
5 .main{
6 width: 1650px;
7 height: 100px;
8 }
9 img{
10 width: 200px;
11 height: 100px;
12 border: 0;
13 }
14 .pic,.copyPic{
15 float: left;
16 }
这样，我们的基本样式就完成了，下面就开始实现轮播效果吧：
首先，为了代码方便，先封装一个简单函数
1 function $(str){ 2 return document.getElementById(str) 3 }
然后为class="copyPic" 的DIV加上内容：
1 (′copyPic′).innerHTML=(′copyPic′).innerHTML=(‘pic‘).innerHTML;
好啦，开始写轮播函数：
1 function move(){
2 if ($(‘out‘).scrollLeft-$(‘copyPic‘).offsetWidth>=0) {
3 $(‘out‘).scrollLeft-=$(‘out‘).offsetWidth;
4 } else{
5 $(‘out‘).scrollLeft++;
6 }
7 }
var t=setInterval(move,10);
这样我们的图片就可以轮播啦，同样的如果希望鼠标放上去后轮播停止，还需要加上几句代码，使用鼠标事件，清除定时器
1 $(‘out‘).onmousemove=function(){
2 clearInterval(t);
3 }
4 $(‘out‘).onmouseout=function(){
5 t=setInterval(move,10);
6 }
OK，这样我们使用JS实现图片轮播的效果也就完成了！
分别用css3、JS实现图片简单的无缝轮播功效