jquery+css实现轮播效果

最新推荐文章于 2023-10-03 17:25:47 发布

原创最新推荐文章于 2023-10-03 17:25:47 发布 · 258 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

轮播

2 篇文章

订阅专栏

该博客主要讲述利用jQuery和CSS实现播播效果，涉及前端开发技术，通过两者结合达成特定视觉呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
.slideBox {
	width: 100%;
	height: 200px;
	border: 1px #c0c0c0 solid;
	overflow: hidden
}

.slideBox img {
	width: 100%;
	height: 200px;
	border: 0;
}

.slideBox li {
	list-style-type: none;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.min[1].js"></script>
<script type="text/javascript">
	var index = 0;
	 setInterval(function() {
		index++;
		var $li = $("#slideBox").children("li");
		if (index >= $li.length) {
			index = 0;
		}
		$li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
	}, 3000); 
</script>
</head>
<body>
	<div class="slideBox">
		<ul id="slideBox">
			<li><img src="images/product/banner_1.jpg" /></li>
			<li><img src="images/product/banner_2.jpg" /></li>
			<li><img src="images/product/banner_3.jpg" /></li>
			<li><img src="images/product/banner_4.jpg" /></li>
		</ul>
	</div>
</body>