Query仿淘宝橱窗位广告图片选项卡代码



104 414 139



特效描述:Query仿淘宝 橱窗位广告图片 选项卡代码,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/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.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>



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


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 其他 选项卡自动切换 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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