Jquery轮播

最新推荐文章于 2025-03-13 01:14:49 发布

_糖纸

最新推荐文章于 2025-03-13 01:14:49 发布

阅读量119

点赞数

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_41821218/article/details/83538787

版权

Jquery 专栏收录该内容

1 篇文章

订阅专栏

HTML和Jquery代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function setpic() {
			var index = 0;
			var stop = false;
			var picid = $("#content").find("#picId li");
			//			console.log(picid[1]); 返回值
			picid.eq(index).addClass("active")
				.siblings()
				.removeClass();
			var contentH = $("#content").height() + 4;

			function toggle() {
				$("#picBox").stop(true, true)
					.animate({
						"marginTop": -contentH * index
					}, 1000)
				//alert(contentH);
				picid.eq(index).addClass("active")
					.siblings()
					.removeClass();
			}
			setInterval(function() {
				if(stop) return;
				index++;
				if(index == picid.length) index = 0;
				toggle();
			}, 3000);
			picid.mouseover(function() {
				stop = true;
				index = picid.index($(this));
				toggle();
			}).mouseout(function() {
				stop = false;
			});
		}
		$(function() {
			setpic();
		});
	</script>

	<body>
		<div id="content">
			<ul id="picBox">
				<li>
					<a href=""><img src="img/0cffa3bad0b5c9cc.jpg" /></a>
				</li>
				<li>
					<a href=""><img src="img/279b7b5e79b969bf.jpg" /></a>
				</li>
				<li>
					<a href=""><img src="img/39de3be29f78d051.jpg" /></a>
				</li>
				<li>
					<a href=""><img src="img/912c56c3ec197689.jpg" /></a>
				</li>
			</ul>
			<ul id="picId">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
	</body>

</html>

CSS代码

* {
	margin: 0;
	padding: 0;
	border: none;
	
}
ul{
	list-style: none;
}
#content {
	width: 590px;
	height: 470px;
	overflow: hidden;
	border: 1px solid black;
	margin: 0px auto;
	position: relative;
}

#content img {
	border: none;
	width: 590px;
	height: 470px;
}

#picId {
	position: absolute;
	top: 450px;
	left: 5px;
	z-index: 100;
	list-style: none;
}

#picId li {
	float: left;
	width: 14px;
	height: 14px;
	font-size: 12px;
	text-align: center;
	line-height: 14px;
	margin: 2px;
	border: 1px solid #069;
	color: white;
	cursor: pointer;
}

#picId li.active {
	float: left;
	width: 14px;
	height: 14px;
	font-size: 12px;
	text-align: center;
	line-height: 14px;
	margin: 2px;
	border: 1px solid #069;
	color: white;
	background-color: #006699;
}