分别用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代码如下:
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="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>
可以看到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=$('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实现图片轮播的效果也就完成了!