<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() {