<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
margin: 0 auto;
}
.dd{
width: 350px;
height: 220px;
margin-top: 100px;
border: 1px pink solid;
overflow: hidden;/*图片隐藏*/
}
a{
color: #000;
text-decoration: none;
}
.center img{
width: 250px;
height: 220px;
}
ul{
float: left;
list-style: none;
}
.left li, .right li{
background: url(img/lili.jpg) repeat-x;
border: 1px red solid;
}
.left li a:hover, .right li a:hover{
background: url(img/abg.gif) repeat-x;
}
.center{
border-left: 1px pink solid;
border-right: 1px pink solid;
}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
jQuery(function(){
//获取绑mouseenter
$(".left li").mouseenter(function(){
//鼠标放入两侧的li中,让中间的ul中对应索引值的li显示出来,其他的隐藏。(右侧的li要+9)
$(".center li").eq($(this).index()).show().siblings("li").hide();
});
$(".right li").mouseenter(function(){
$(".center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
});
});
</script>
</head>
<body>
<div class="dd">
<ul class="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 class="center" id="center">
<li><a href="#"><img src="img/女靴.jpg"/></a></li>
<li><a href="#"><img src="img/雪地靴.jpg"/></a></li>
<li><a href="#"><img src="img/冬裙.jpg"/></a></li>
<li><a href="#"><img src="img/呢大衣.jpg"/></a></li>
<li><a href="#"><img src="img/毛衣.jpg"/></a></li>
<li><a href="#"><img src="img/棉服.jpg"/></a></li>
<li><a href="#"><img src="img/女裤.jpg"/></a></li>
<li><a href="#"><img src="img/羽绒服.jpg"/></a></li>
<li><a href="#"><img src="img/牛仔裤.jpg"/></a></li>
<li><a href="#"><img src="img/女包.jpg"/></a></li>
<li><a href="#"><img src="img/男包.jpg"/></a></li>
<li><a href="#"><img src="img/登山鞋.jpg"/></a></li>
<li><a href="#"><img src="img/皮带.jpg"/></a></li>
<li><a href="#"><img src="img/围巾.jpg"/></a></li>
<li><a href="#"><img src="img/皮衣.jpg"/></a></li>
<li><a href="#"><img src="img/男毛衣.jpg"/></a></li>
<li><a href="#"><img src="img/男棉服.jpg"/></a></li>
<li><a href="#"><img src="img/男靴.jpg"/></a></li>
</ul>
<ul class="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>
淘宝滑动界面
最新推荐文章于 2019-09-29 18:32:45 发布