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

最新推荐文章于 2022-07-25 17:31:51 发布

guo-snowstorm

最新推荐文章于 2022-07-25 17:31:51 发布

阅读量1.1w

点赞数 1

分类专栏： jQuery 文章标签： jQuery 图片轮播

本文链接：https://blog.csdn.net/u010874036/article/details/51050817

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

guo-snowstorm

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现图片轮播特性。使用animate函数

图片轮播特效是一个非常常见的特性，可以使用jQuery来实现，下面使用animate（）函数来实现向左轮播（向其他方向的轮播与其相似），实现的方法有两种，先看一下实现原理：1、假设公五张图片，图片宽度均为200px，图片并排放置在一个总宽度为1000px的容器内。2、另外设一个视口容器的宽度为600px，并设置overflow属性为hidden，将上述图片容器放入此容器内，则只会同时显示三
复制链接

扫一扫

专栏目录