Query仿淘寶櫥窗位廣告圖片選項卡代碼



111 440 147



特效描述: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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表