分别用css3、JS实现图片简单的无缝轮播功效

小咪咪 2022-06-16 08:29 169阅读 0赞

本文主要介绍分别使用CSS3、JS实现图片简单无缝轮播功效；

一、使用CSS3实现：利用animation属性

（实现一张一张的轮播，肉眼只看见一张图片）

HTML部分比较简单，两个div下包着几个img标签；为了实现无缝轮播，注意第一张图片要与最后一张图片相同；

![复制代码][copycode.gif]

![复制代码][copycode.gif]

最外层div设置ovflow:hidden;position: relative;既然最外层div设置了position: relative;所以内层div需要设置position: absolute;使得其运动相对父元素而言；

CSS代码如下：

![复制代码][copycode.gif]

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         }

![复制代码][copycode.gif]

这样图片就可以轮播了，但是鼠标放上去的时候图片还是一直在轮播的，如果我们想让鼠标放在图片上时，轮播停止，或者出现一些信息，我们需要加上：hover;设置动画的状态，代码很简洁：如下

1 .out:hover .imgs\{ 2 animation-play-state:paused 3 \}

这样我们的轮播效果就出来啦；

效果图什么的也懒得贴了；

二、使用JS实现：利用定时器setInterval

（多张图片轮播，肉眼可以看到多张图片）

同样HTML部分比较简单，需要设置外层DIV ovflow:hidden;之所以每个div既有class，也有id,是因为样式我是通过class控制的，DOM是通过ID获取的

![复制代码][copycode.gif]

1 <div class="out" id="out">
     2             <div class="main" id='main'>
     3                 <div class="pic" id="pic">
     4                     <img src="img/0.jpg"/>
     5                     <img src="img/6.jpg"/>
     6                     <img src="img/hehua2.2.png"/>
     7                     <img src="img/tupian1.png"/>
     8                 </div>
     9                 <div class="copyPic" id="copyPic">
    10                     
    11                 </div>
    12             </div>

![复制代码][copycode.gif]

可以看到class="copyPic" 的DIV为空的，没有内容，不急，在JS部分会为他赋上内容，其内容与class="pic"的一样；当然我们也可以直接在HTML中为其添加内容；现在为其加上一点CSS样式吧

![复制代码][copycode.gif]

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             }

![复制代码][copycode.gif]

这样，我们的基本样式就完成了，下面就开始实现轮播效果吧：

首先，为了代码方便，先封装一个简单函数

1 function $(str)\{ 2 return document.getElementById(str) 3 \}

然后为class="copyPic" 的DIV加上内容：

1 (′copyPic′).innerHTML= (′copyPic′).innerHTML=('pic').innerHTML;

好啦，开始写轮播函数：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

这样我们的图片就可以轮播啦，同样的如果希望鼠标放上去后轮播停止，还需要加上几句代码，使用鼠标事件，清除定时器

1 $('out').οnmοusemοve=function(){
    2                 clearInterval(t);
    3             }
    4             $('out').οnmοuseοut=function(){
    5                  t=setInterval(move,10);
    6             }

OK，这样我们使用JS实现图片轮播的效果也就完成了！

[copycode.gif]: /images/20220616/715eab49c2e4474989e02c7265e8d69a.png