完整的項目在附件中 複製代碼 代碼如下: 圖片切換 <BR>var num = 0 <BR>$(function(){ <BR>$("div ol li").mouseover(function( e){ <BR>$(this).attr("class","current"); <BR>$(this).siblings().attr("class",""); //兄弟節點的class屬性設定為空<BR>//alert($('ul').index()) <BR>num = $('ul').index() 2 <BR>var index = $(this).index (); //記錄選定的li標籤在ul中的索引<BR>//圖片會出現層疊現象為了顯示目前的圖片，把目前的圖片的z-index 值設定為大於其他的兄弟元素<BR>$("div ul li").eq(index).css({"left":"650px","zIndex":num}) <BR>$("div ul li").eq(index). siblings().css("zIndex",num-1); <BR>//動畫效果，圖片從右側飛入<BR>$("div ul li").eq(index).animate({left :"0"},500) <BR><br>}); <br><br>}); <br> <BR>* {margin: 0px;padding: 0px;border: 0px;} <BR>ul,ol{list-style: none;} <BR>.all{width:650px;height: 250px;margin: 100px autoposition: relative; ;border: 1px solid crimson;overflow: hidden;} <BR>.all ul{position: relative;z-index: 1;position: relative;} <BR><br>/*子絕父相*/ <br>.all ul li{position: absolute;left: 0;top: 0px;} <BR><br>.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;} <br>.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight: <BR>bold;text-align: center;line-height: 20px;float: leftpx; ;margin-left: 10px;margin-top: 10px;} <BR><br>.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid; 0px; <br>cursor: pointer;} <BR> 1 2 3 4
