Jquery实现简单图片切换
程序员文章站
2022-05-14 21:13:40
...
Jquery实现简单图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>30秦甜甜_实训14-2_2_180701802230_18计算机2班</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 1210px;
height: 900px;
margin: 30px auto;
border: 1px solid #111111;
}
#left {
width: 150px;
height: 900px;
float: left;
}
#right {
width: 150px;
height: 900px;
float: right;
}
#left li>a,
#right li>a {
display: block;
width: 150px;
height: 99px;
text-align: center;
line-height: 100px;
text-decoration: none;
background-color: cornflowerblue;
border-bottom: 1px solid #ccc;
color: #333;
}
#left li>a {
border-right: 1px solid #ccc
}
#right li>a {
border-left: 1px solid #ccc
}
#left li>a:hover,
#right li>a:hover {
background-color: darkorange;
color: white;
}
#center {
width: 900px;
height: 900px;
float: left;
margin: 0 5px;
}
#center li>a>img {
display: block;
width: 898px;
height: 898px;
border: 1px solid #ccc;
}
#center img {
width: 898px;
height: 898px;
}
#center li {
display: block;
}
</style>
<script src="../JQuery/jquery-1.11.1.min.js"></script>
<script>
$(function() {
$("#center>li:first").show().siblings().hide();
$("#left>li").mouseover(function() {
var index = $(this).index();
$("#center>li:eq("+ index + ")").show().siblings().hide();
});
$("#right>li").mouseover(function() {
var index = $(this).index() + 9;
$("#center>li:eq(" + index + ")").show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="box">
<ul id="left">
<li><a href="#">珠宝</a></li>
<li><a href="#">婴幼儿</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">男鞋</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">背包</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">民族</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="img/图片01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片02.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片04.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片05.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片06.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片07.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片08.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片09.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片10.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片11.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片12.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片13.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片14.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片15.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片16.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片17.jpg" alt=""></a></li>
<li><a href="#"><img src="img/图片18.jpg" alt=""></a></li>
</ul>
<ul id="right">
<li><a href="#">简约</a></li>
<li><a href="#">温婉</a></li>
<li><a href="#">个性</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">高级</a></li>
<li><a href="#">气质</a></li>
<li><a href="#">可爱</a></li>
<li><a href="#">优雅</a></li>
<li><a href="#">知性</a></li>
</ul>
</div>
</body>
</html>
运行结果图：
上一篇： Android--权限机制
下一篇： 数据库三范式，轻松理解_PHP教程