TA貢獻1788條經驗 獲得超4個贊
按照百度的源代碼做了一個簡單的（chrome開發工具查看的）：
<html> <head> <style> #banner { overflow: hidden; position: relative; height: 500px; } .banner-img { position: absolute; height: 500px; top: 0; right: 0; } .banner-tab { width: 639px; height: 57px; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: -70px auto 0 auto; padding-top: 13px; position: relative; z-index: 2; overflow: hidden; } .banner-tab-wrap { position: relative; top: 70px; width: 639px; } .banner-tab-inner { margin: 0 auto; overflow: hidden; } .banner-item { float: left; height: 40px; width: 60px; border: 1px solid #5d5d5d; margin: 1px 11px; opacity: .3; cursor: pointer; position: relative; } .selected { border: 2px solid #444!important; margin: 0 10px; opacity: 1; } .show { z-index: 1; } </style> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script> $(function(){ $("#banner,#banner-tab").mouseover(function(){ $(".banner-tab-wrap").css("top","0px"); }).mouseout(function(){ $(".banner-tab-wrap").attr("style",""); }); $("#banner-tab span").mouseover(function(){ var index = $(this).prevAll("span").length; $("#banner span").removeClass("show"); $("#banner span").hide(); $("#banner span").eq(index).show(); $("#banner span").eq(index).addClass("show"); $("#banner-tab span").removeClass("selected"); $(this).addClass("selected"); }).mouseout(function(){ }); }); </script> </head> <body> <div id="banner"> <span class="banner-img show" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic01.jpg); width: 1423px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic02.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic03.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> <span class="banner-img" style="background-image: url(http://img.baidu.com/img/iknow/openiknow/home/pic04.jpg); width: 1423px; display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></span> </div> <div id="banner-tab" class="banner-tab"> <div class="banner-tab-wrap" > <div class="banner-tab-bg"></div> <div class="banner-tab-inner" style="width:340px"> <span class="banner-item selected"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_01.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_02.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_03.png"></span> <span class="banner-item"><img src="http://img.baidu.com/img/iknow/openiknow/home/lit_04.png"></span> </div> </div> </div> </body> </html>
舉報