jQuery仿淘宝橱窗位广告特效代码下载



8 30 11



特效描述:仿淘宝橱 窗位广告,jQuery仿淘宝橱窗位广告特效代码下载

代码结构

1. 引入JS

<script src="jquery-1.11.1.min.js"></script>

2. HTML代码

<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="images/1.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/2.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/3.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/4.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/5.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/6.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/7.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/8.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/9.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/10.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/1.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/2.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/3.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/4.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/5.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/6.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="images/7.jpg" width="200" height="250"></a></li>
    <li><a href="#"><img src="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 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';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片 图片切换 图片轮播

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到