图片轮番的JQuery代码

最新推荐文章于 2025-06-16 13:45:58 发布

原创最新推荐文章于 2025-06-16 13:45:58 发布 · 361 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用JSP和JQuery实现网页上的轮播图效果，包括图片展示、鼠标悬停交互及样式设置。通过具体的代码示例，展示了show和hide方法的运用，以及如何通过CSS和JQuery控制图片的显示与隐藏。

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

			<div class="mianShowPic" >
				<a title="十二月唤醒记" target="_blank" class="on" >
					<img alt="十二月唤醒记" src="./images/rotate_1.jpg">
				</a>
				<a title="欧美名人传记" target="_blank" class="on" >
					<img alt="欧美名人传记" src="./images/rotate_2.jpg">
				</a>
				<a title="萧红全集" target="_blank" class="on" >
					<img alt="萧红全集" src="./images/rotate_3.jpg">
				</a>
				<a title="幾米袖珍本" target="_blank" class="on" >
					<img alt="幾米袖珍本" src="./images/rotate_4.jpg">
				</a>
				<div class="picDesc" >
					<a class="on" >
						<span>十二月唤醒记</span>
					</a>
					<a class="on" >
						<span>欧美名人列传</span>
					</a>
					<a class="on" >
						<span>萧红全集</span>
					</a>
					<a class="on" >
						<span>幾米袖珍本</span>
					</a>
				</div>
			</div>

JSP页面的主要代码实现。

/* 主界面轮换图片位置 */
.mainBody .mianShowPic {
	position: absolute;
	height: 340px;
	width: 740px;
	background-color: white;
	display: inline-block;
}
.mainBody .mianShowPic .on {
	display: none;
}
.mainBody .mianShowPic .on img {
	margin: 5px;
}
.mainBody .mianShowPic .picDesc {
	position: absolute;
	float: left;
	bottom: 0;
	background-color: #4B4949;
	color: white;
	width: 100%;
	display: table;
	filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7;
}
.mainBody .mianShowPic .picDesc a {
	width: 25%;
	display: table-cell;
	text-align: center;
	text-decoration: none;
	padding: 10px 0;
}

CSS样式的加入，之前需要将所有的格式都进行清除格式，就不写了


$(function() {
	/**
	 * 初始加载图片
	 */
	$(".mainBody .mianShowPic .on:eq(0)").show();
	$(".mainBody .mianShowPic .picDesc .on:eq(0)").css("background", "#e60000");
	/**
	 * 获取鼠标悬浮事件
	 */
	$(".mainBody .mianShowPic .picDesc .on").hover(function() {
		//> 表示子节点 
		$(".mainBody .mianShowPic .picDesc>.on").css("background", "");
		$(this).css("background","#e60000");
		//> 只隐藏子节点
		$(".mainBody .mianShowPic>.on").hide();
		$(".mainBody .mianShowPic .on:eq(" + $(this).index() + ")").show();
	}, function() {
		//$(this).css("background","none");
	});
});

JQuery低骂道额具体实现。

知识点：
show和hide的使用
$(".mainBody .mianShowPic>.on").hide();
$(".mainBody .mianShowPic .on:eq(0)").show();
标签加css属性，>代表子节点执行孙子节点不执行
$(".mainBody .mianShowPic .picDesc>.on").css(“background”, “”);
拼写字符串完成数字参数
$(".mainBody .mianShowPic .on:eq(" + $(this).index() + “)”).show();

$(".mainBody .mianShowPic .picDesc>.on").css(“background”, “”);
同一class的鼠标悬浮事件
$(".mainBody .mianShowPic .picDesc .on").hover(function() {