前台jQuery实现图片轮播

最新推荐文章于 2024-03-14 19:48:19 发布

不争气争口馒头

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量3.7k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_29376717/article/details/78155526

版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在JSP页面中使用jQuery实现图片轮播功能。内容包括轮播图片的命名规则以及JavaScript代码实现。

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

jsp页面

需要注意的是，轮播的图片顺序跟命名有关，

<div class="slider">
						<a href=""><img border="0px" id="slider_img" src="img/slider-1.jpeg"/></a>
						<ul><li id="1"></li><li id="2"></li><li id="3"></li><li id="4"></li><li id="5"></li></ul>
					</div>

css代码

.slider{
	width: 600px;
	height: 300px;
	margin-bottom: 10px;
}
.slider ul{
	position: relative;
	margin-top: -50px;
	margin-left: 240px;
	width: 200px;
	height: 100px;
}
.slider ul li{
	width: 15px;
	height: 15px;
	float: left;
	margin-left:10px;
	list-style: none;
	border-radius: 20px;
	background: white;
}

js代码

//图片轮播
var i = 1;
//如果scroll为true，轮播，否则停止轮播
 var scroll = true;
//动画事件，在2000ms内完成function
 setInterval(function() {
	if (scroll) {
		if (i == 5) {
			i = 0;
		}
		$(".slider ul li:eq(" + i + ")").css("background", "gray");//让小圆点变灰色
		$(".slider ul li:eq(" + i + ")").siblings().css("background", "white");//同级的小圆点变白色
		i++;
		$("#slider_img").attr("src", "img/slider-" + i + ".jpeg");//这里可以看出和图片的命名有关
	}
}, 2000);

$(function(){
// 图片轮播
	$(".slider ul li:eq(0)").css("background", "gray");
	$(".slider ul li:eq(0)").siblings().css("background", "white");
	$("#slider_img").attr("src", "img/slider-1.jpeg");
	$(".slider ul li").hover(function() {//当鼠标移到圆点上
		scroll = false;//停止轮播
		$a = $(this).attr("id");
		$("#slider_img").attr("src", "img/slider-" + $a + ".jpeg");
		i = $a;//从当前图片开始轮播
		$(this).css("cursor", "pointer").css("background", "gray");
		$(this).siblings().css("background", "white");

	}, function() {
		scroll = true;
	});
)}