jQuery实现图片轮播特性。使用animate函数

来源：互联网发布：如何看待人工智能编辑：程序博客网时间：2024/06/06 02:26

图片轮播特效是一个非常常见的特性，可以使用jQuery来实现，下面使用animate（）函数来实现向左轮播（向其他方向的轮播与其相似），实现的方法有两种，先看一下实现原理：

1、假设公五张图片，图片宽度均为200px，图片并排放置在一个总宽度为1000px的容器内。

2、另外设一个视口容器的宽度为600px，并设置overflow属性为hidden，将上述图片容器放入此容器内，则只会同时显示三张图，另外两张在容器外部且不可见，（同理，如果容器宽度为200px，则只会同时显示一张图，当设置容器宽度为1000px或更大时，可同时显示所有图片，但是这样会使轮播效果不平滑。）

3、实现轮播效果的核心思想：两种：

（1）使用animate（）函数平滑改变图片容器的左外边距为-200px（设置左外边距为-200px，会使图片容器的左外边界往右收缩200px，视觉上图片容器向左移动了200px，进而使第一个图片向左移200px，进而第二个图片正好移动到了第一个图片的位置。。。），然后在回调函数内设置回图片容器的左外边距为0，并将第一个图片（t它已经在视口容器左边了）移除后加到最后一个图片的后面，然后重复上面的动作，这就实现了轮播。

（2）设置视口容器的position值设为relative，图片容器的position值设为absolute，使用animate（）函数将图片容器的left值平滑设置为-200px，将图片容器向左移动一个图片的宽度（进而第一个图片到了第一个图片的位置。。。），在回调函数内将图片容器的left属性设置回0，并将第一个图片移除后添加到最后一个图片的后面，重复上述动作，实现轮播效果。

下面是实现代码：

第一种方法：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(document).ready(function(){function rollOne(){$(".picBox").animate({marginLeft:"-200px"},2000,"linear",function(){$(this).css({marginLeft:"0px"});$(this).children("li").first().remove().clone(true).appendTo(".picBox");});}var startRollOne=setInterval(rollOne,2000);$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(rollOne,2000);});});</script><style>.box{width: 600px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box p{text-align: center;}.picBox{margin: 0px;padding: 0px;list-style: none;width: 1500px;position: absolute;}.picBox:hover{cursor: pointer;}.picBox li{float: left;}.picBox img{width: 200px;height: 240px;}</style></head><body><div class="box"><p> 图片轮播</p><ul class="picBox"><li><img src="a.jpg" /></li><li><img src="b.jpg" /></li><li><img src="c.jpg" /></li><li><img src="d.jpg" /></li><li><img src="e.jpg" /></li></ul></div></body></html>

第二种方法：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(document).ready(function(){function rollOne(){$(".picBox").animate({left:"-200px"},2000,"linear",function(){$(this).css({left:"0px"});$(this).children("li").first().remove().clone(true).appendTo(".picBox");});}var startRollOne=setInterval(rollOne,2000);$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(rollOne,2000);});});</script><style>.box{width: 600px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box p{text-align: center;}.picBox{margin: 0px;padding: 0px;list-style: none;width: 1500px;position: absolute;}.picBox:hover{cursor: pointer;}.picBox li{float: left;}.picBox img{width: 200px;height: 240px;}</style></head><body><div class="box"><p> 图片轮播</p><ul class="picBox"><li><img src="a.jpg" /></li><li><img src="b.jpg" /></li><li><img src="c.jpg" /></li><li><img src="d.jpg" /></li><li><img src="e.jpg" /></li></ul></div></body></html>

0 0