轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
#context {
width: 300px;
height: 260px;
margin: auto;
overflow: hidden;
}
#left {
width: 80px;
float: left;
}
#right {
width: 215px;
float: right;
}
#left ul li a {
display: inline-block;
width: 84px;
height: 28px;
color: #8A2BE2;
background-color: greenyellow;
text-align: center;
line-height: 28px;
font-weight: bold;
}
#left ul li a:hover {
background-color: aquamarine;
}
</style>
<script src="../jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#left>ul>li ").mouseover(function() {
var index = $(this).index()
$("#right>ul>li:eq(" + index + ")").fadeIn(1000).siblings().hide()
});
});
</script>
</head>
<body>
</body>
<div id="context">
<div id="left">
<ul>
<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>
<div id="right">
<ul>
<li><img src="img/女靴.jpg" /></li>
<li><img src="img/雪地靴.jpg" /></li>
<li><img src="img/冬裙.jpg" /></li>
<li><img src="img/呢大衣.jpg" /></li>
<li><img src="img/毛衣.jpg" /></li>
<li><img src="img/棉服.jpg" /></li>
<li><img src="img/女裤.jpg" /></li>
<li><img src="img/羽绒服.jpg" /></li>
<li><img src="img/牛仔裤.jpg" /></li>
</ul>
</div>
</div>
</html>
运行结果