<!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>
淘寶滑動界面
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章