图片轮播特效是一个非常常见的特性,可以使用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>