jQuery仿淘宝橱窗位广告代码
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery仿淘宝橱窗位广告代码</title>
<style type="text/css">
* { margin: 0; padding: 0; font-size: 12px; }
ul { list-style: none; }
img { border: 0; }
a { text-decoration: none; }
.wrapper { width: 298px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; }
#left, #center, #right { float: left; }
#left li, #right li { background: url(images/lili.jpg) repeat-x; }
#left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; }
#left li a:hover, #right li a:hover { background-image: url(images/abg.gif); }
#center { border-left: 1px solid pink; border-right: 1px solid pink; }
</style>
</head>
<body>
<div class="wrapper">
<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="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/1.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/2.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/3.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/4.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/5.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/6.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/7.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/8.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/9.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/10.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/1.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/2.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/3.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/4.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/5.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/6.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/7.jpg" width="200" height="250"></a></li>
<li><a href="#"><img src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/images/8.jpg" width="200" height="250" /></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>
<script src="//xcdn.php.cn/js/ads/jQuery仿淘宝橱窗位广告代码/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//鼠标悬停在左侧li上时，对应的中间图片要进行显示
$("#left > li").mouseover(function() {
//对应的中间图片显示
//索引值对应
//把当前悬停在li索引进行保存
var indexLi = $(this).index();
//console.log(indexLi);
//对应图片显示，其他图片隐藏
//$("#center > li:eq(" +indexLi + ")").show();
//$("#center > li:eq(" +indexLi + ")").siblings().hide();
//链式编程
$("#center > li:eq(" + indexLi + ")").show().siblings().hide();
//第二点：$("li:eq()") 过滤选择器eq()方法
$("#center > li").eq(indexLi).show().siblings().hide();
});
//右侧
$("#right > li").mouseover(function() {
//对应的中间图片显示
//索引值对应
//把当前悬停在li索引进行保存
var indexLi = $(this).index();
//console.log(indexLi);
//对应图片显示，其他图片隐藏
//$("#center > li:eq(" +indexLi + ")").show();
//$("#center > li:eq(" +indexLi + ")").siblings().hide();
//链式编程
//$("#center > li:eq(" +indexLi + ")").show().siblings().hide();
//第二点：$("li:eq()") 过滤选择器eq()方法
$("#center > li").eq(indexLi + 9).show().siblings().hide();
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="#" target="_blank">牛牛论坛</a></p>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
页:
[1]