| 初始效果： | 鼠標移入效果： |
|
|
首先添加jQuery庫，我這邊直接引用百度CDN地址
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
寫一個jQuery載入事件
$(function(){});//因為HTML文檔是由瀏覽器從上到下依次載入的，載入事件能避免JavaScript代碼放在太后面而沒效果
載入事件里面寫鼠標移入<li>標簽調用的方法
$('#left>li,#right>li').mouseenter(function(){});//#left>li選擇器是獲取左邊的<li>標簽，同理#right>li獲取的是右邊的<li>標簽，mouseenter是鼠標移入被選元素觸發的事件
獲取當前被選元素的索引
var i=$(this).index();//index() 方法返回指定元素相對於其他指定元素的 index 位置。
因為右邊圖片索引值需要加上左邊圖片的數量才能正確顯示所有需要加個判斷是左邊元素被選還是右邊
if($(this).parent().attr("id")=="right"){ i+=4; }if($(this).parent().attr("id")=="right"){ i+=4; }//當前元素的父元素id是為右邊無序列表id的話索引值加4,parent() 方法返回被選元素的直接父元素,attr() 方法設置或返回被選元素的屬性和值
在中間顯示對應的圖片
$("#center>li:not()").hide().eq(i).show();//因為所有的圖片都加在了中間無序列表里里，所有需要先隱藏全部圖片后顯示需要的圖片,:not(selector)去除所有與給定選擇器匹配的元素，hide() 方法隱藏被選元素,:eq(index) 選取索引等於index 的元素，索引從0開始,show() 方法顯示隱藏的被選元素。
整個jQuery代碼
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
$('#left>li,#right>li').mouseenter(function() {
var i = $(this).index(); //index() 方法返回指定元素相對於其他指定元素的 index 位置。
if($(this).parent().attr("id")=="right"){
i+=4;
}//當前元素的父元素id是為右邊無序列表id的話索引值加4,parent() 方法返回被選元素的直接父元素,attr() 方法設置或返回被選元素的屬性和值
$("#center>li:not()").hide().eq(i).show(); //因為所有的圖片都加在了中間無序列表里里，所有需要先隱藏全部圖片后顯示需要的圖片,:not(selector)去除所有與給定選擇器匹配的元素，hide() 方法隱藏被選元素,:eq(index) 選取索引等於index 的元素，索引從0開始,show() 方法顯示隱藏的被選元素。
});//#left>li選擇器是獲取左邊的<li>標簽，同理#right>li獲取的是右邊的<li>標簽，mouseenter是鼠標移入被選元素觸發的事件
}); //因為HTML文檔是由瀏覽器從上到下依次載入的，載入事件能避免JavaScript代碼放在太后面而沒效果
</script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>博客園（https://www.cnblogs.com）</title> <link rel="stylesheet" href="css/good2.0.css"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { $('#left>li,#right>li').mouseenter(function() { var i = $(this).index(); //index() 方法返回指定元素相對於其他指定元素的 index 位置。 if($(this).parent().attr("id")=="right"){ i+=4; }//當前元素的父元素id是為右邊無序列表id的話索引值加4,parent() 方法返回被選元素的直接父元素,attr() 方法設置或返回被選元素的屬性和值 $("#center>li:not()").hide().eq(i).show(); //因為所有的圖片都加在了中間無序列表里里，所有需要先隱藏全部圖片后顯示需要的圖片,:not(selector)去除所有與給定選擇器匹配的元素，hide() 方法隱藏被選元素,:eq(index) 選取索引等於index 的元素，索引從0開始,show() 方法顯示隱藏的被選元素。 });//#left>li選擇器是獲取左邊的<li>標簽，同理#right>li獲取的是右邊的<li>標簽，mouseenter是鼠標移入被選元素觸發的事件 }); //因為HTML文檔是由瀏覽器從上到下依次載入的，載入事件能避免JavaScript代碼放在太后面而沒效果 </script> </head> <body> <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> </ul> <ul id="center"> <li><a href="#"><img src="img/雪地靴.jpg"/></a></li> <li><a href="#"><img src="img/冬裙.jpg"/></a></li> <li><a href="#"><img src="img/呢大衣.jpg"/></a></li> <li><a href="#"><img src="img/牛仔褲.jpg"/></a></li> <li><a href="#"><img src="img/登山鞋.jpg"/></a></li> <li><a href="#"><img src="img/皮帶.jpg"/></a></li> <li><a href="#"><img src="img/男毛衣.jpg"/></a></li> <li><a href="#"><img src="img/男棉服.jpg"/></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> </ul> </div> </body> </html>
* { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 218px; height: 108px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(../img/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { color: #fff; background-image: url(../img/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } img { width: 120px; height: 108px; }