先来看一下效果:
代码部分:
html:
分为左中右三部分,三部分均由列表实现。
<div id="container">
<div id="left">
<ul id="ul">
<li><a href="#">女鞋</a></li>
<li><a href="#">女鞋</a></li>
//已两个为例,其他省略
</ul>
</div>
<div id="center">
<ul id="uu">
<li><a href="#"><img src="images/女靴.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="240" height="240"/></a></li>
</ul>
</div>
<div id="right">
<ul id="ul">
<li><a href="#">男包</a></li>
<li><a href="#">男包</a></li>
</ul>
</div>
</div>
css部分:
<style>
* {
margin:0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#container {
width: 400px;
height: 300px;
margin: 100px auto;
}
#left, #center, #right {
float: left;
width: 50px;
height: 240px;
border:1px solid red;
}
#center {
width: 240px;
}
#left li, #right li{
border:1px solid red;
height: 22px;
text-align: center;
line-height: 22px;
}
#left li:hover, #right li:hover {
background: red;
}
#center {
position: relative;
}
#center li{
position: absolute;
display: none;
}
#center li:first-child{
display: block;
}
</style>
jQuery部分:
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("#left li").mouseover(function(){
var index = $(this).index();
console.log(index);
$("#center li:eq(" + index + ")").siblings("li").hide();
$("#center li:eq(" + index + ")").show();
});
$("#right li").mouseover(function(){
var index = $(this).index() + 10;
console.log(index);
$("#center li:eq(" + index + ")").siblings("li").hide();
$("#center li:eq(" + index + ")").show();
});
})
</script>
全部代码->方便复制粘贴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
#container {
width: 400px;
height: 300px;
margin: 100px auto;
}
#left, #center, #right {
float: left;
width: 50px;
height: 240px;
border:1px solid red;
}
#center {
width: 240px;
}
#left li, #right li{
border:1px solid red;
height: 22px;
text-align: center;
line-height: 22px;
}
#left li:hover, #right li:hover {
background: red;
}
#center {
position: relative;
}
#center li{
position: absolute;
display: none;
}
#center li:first-child{
display: block;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("#left li").mouseover(function(){
var index = $(this).index();
console.log(index);
$("#center li:eq(" + index + ")").siblings("li").hide();
$("#center li:eq(" + index + ")").show();
});
$("#right li").mouseover(function(){
var index = $(this).index() + 10;
console.log(index);
$("#center li:eq(" + index + ")").siblings("li").hide();
$("#center li:eq(" + index + ")").show();
});
})
</script>
</head>
<body>
<div id="container">
<div id="left">
<ul id="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>
<li><a href="#">女鞋</a></li>
</ul>
</div>
<div id="center">
<ul id="uu">
<li><a href="#"><img src="images/女靴.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/冬裙.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/呢大衣.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/毛衣.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/棉服.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/女裤.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/羽绒服.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/女包.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/男包.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/登山鞋.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/皮带.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/围巾.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/皮衣.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/男毛衣.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/男棉服.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/男靴.jpg" width="240" height="240"/></a></li>
<li><a href="#"><img src="images/女包.jpg"width="240px" height="240px" alt=""></a></li>
<li><a href="#"><img src="images/女包.jpg"width="240px" height="240px" alt=""></a></li>
</ul>
</div>
<div id="right">
<ul id="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>
<li><a href="#">男包</a></li>
</ul>
</div>
</div>
</body>
</html>
总结
1.获取索引的方法-> index();
2.需要记录滑过的索引且注意左右两侧的索引不一样,右侧的索引在当前案例中药加10。
3.让照片显示和隐藏使用方法show(),hide()。
4.本案例用到索引选择器eq();括号中参数为数字,出eq()还有gt(),lt(),前者指给不包括当前元素后面的元素添加相应的样式,后者为给不包括当前元素前面的元素添加相应的样式。
5.拼接字符串串时注意在适当位置加引号,如当前案例中的:
$("#center li:eq(" + index + ")").show();
6.本人也刚刚入门若上述代码及表述有误,望看到的大佬及时指出并纠正,定虚心求教。