jQuery实现图片轮播且鼠标可控制显示，使用animate函数

最新推荐文章于 2022-02-24 15:26:41 发布

guo-snowstorm

最新推荐文章于 2022-02-24 15:26:41 发布

阅读量2.5k

点赞数

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

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

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

图片容器的左下角加一排数组，当鼠标指向某个数字时，就显示相应的图片，并且还有图片轮播效果，使用了jQuery库，实例代码：

<!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(){
			var len = $(".num li").length;
			var index = 0;
			var startRollOne;

			$(".num li").mouseover(function(){
				index=$(".num li").index(this);
				showImg(index);
			}).eq(0).mouseover();

			$(".box").hover(function () {
				clearInterval(startRollOne);
			}, function () {
				startRollOne=setInterval(function () {
					showImg(index);
					index++;
					if(index==len){
						index=0;
					}
				},2000);
			}).trigger("mouseleave");

			function showImg(index){
				$(".picBox").stop(true,false).animate({
					marginLeft:-200*index+"px"
				},1000);
				$(".num li").removeClass("on").eq(index).addClass("on");
			}

		});
	</script>
	<style>
		.box{
			width: 200px;
			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;
		}
		.num {
			list-style: none;
			position: absolute;
			bottom: 1px;
			right: 10px;
		}
		.num li{
			text-align: center;
			width: 15px;
			height:15px;
			background-color: white;
			opacity: 1;
			line-height: 18px;
			float: left;
			border: red solid 1px;
			margin-left: 2px;
			font-size: 15px;
		}
		.num li.on{
			text-align: center;
			width: 20px;
			height:20px;
			background-color: red;
			opacity: 1;
			font-size: 18px;
			line-height: 20px;
			float: left;
			border: red solid 1px;
			margin-left: 2px;
		}
	</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>
	<ul class="num">
		<li class="on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>
</body>
</html>