完全なプロジェクトは添付ファイルにあります コードをコピーします コードは次のとおりです: < ;!DOCTYPE html> 画像切り替え <br>var num = 0 <br>$(function(){ <br>$(" div ol li").mouseover(function(e){ <br>$(this).attr("class","current"); <br>$(this).siblings().attr( "class", ""); //兄弟ノードのクラス属性は空に設定されます<br>//alert($('ul').index()) <br>num = $('ul') .index() 2 <br>varindex = $(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>$("div ul li") .eq(index).animate({left:"0"},500) <br><br>}); ; <br> <br>*{margin: 0px;padding: 0px;border: 0px;} <br>ul,ol{list -style: none;} <br>.all{width:650px ;height:250px;margin:100px auto;position:relative;border:1pxソリッドクリムゾン;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: 絶対;z-index: 2; right: 10px;bottom: 10px;} <br>.all ol li{width: 20px;height: 20px;background: #333; border: 1px ソリッド #509629;font-weight: <br>bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;} <br><br>.all ol .current{width: 30px;height: 30px;line-height : 30px; border: 1px margin-top: 0px; <br> 🎜> 1 3 🎜>4