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

时间:2023-03-08 16:42:28
分别用css3、JS实现图片简单的无缝轮播功效

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

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

(实现一张一张的轮播,肉眼只看见一张图片)

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

<div class="out">
<div class="imgs">
<img src="img/beatuy.jpg"/>
<img src="img/child.jpg"/>
<img src="img/girl.jpg"/>
<img src="img/milk.jpg"/>
<img src="img/cup.jpg"/>
<img src="img/dog.jpg"/>
<img src="img/beatuy.jpg"/>
</div>
</div>

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

CSS代码如下:

 .out{
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
}
.imgs{
width: 1400px;
height: 100px;
position: absolute;
animation: ppt 10s linear infinite;
} img{
float: left;
width: 200px;
height: 100px;
}
@keyframes ppt{
%{left:0px}
%{left:-250px}
%{left:-500px}
%{left:-750px}
%{left:-1000px}
%{left:-1200px}
}

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

.out:hover .imgs{ animation-play-state:paused }

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

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

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

(多张图片轮播,肉眼可以看到多张图片)

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

 <div class="out" id="out">
<div class="main" id='main'>
<div class="pic" id="pic">
<img src="img/0.jpg"/>
<img src="img/6.jpg"/>
<img src="img/hehua2.2.png"/>
<img src="img/tupian1.png"/>
</div>
<div class="copyPic" id="copyPic"> </div>
</div>

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

 .out{
width: 820px;
overflow: hidden;
}
.main{
width: 1650px;
height: 100px;
}
img{
width: 200px;
height: 100px;
border:;
}
.pic,.copyPic{
float: left;  
}

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

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

function $(str){ return document.getElementById(str) }

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

$('copyPic').innerHTML=$('pic').innerHTML;

好啦,开始写轮播函数:

 function move(){
if ($('out').scrollLeft-$('copyPic').offsetWidth>=0) {
$('out').scrollLeft-=$('out').offsetWidth;
} else{
$('out').scrollLeft++;
}
}
    var t=setInterval(move,10);

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

 $('out').onmousemove=function(){
clearInterval(t);
}
$('out').onmouseout=function(){
t=setInterval(move,10);
}

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