<!DOCTYPE html>
<html lang="zh-CN"><head> <meta charset="UTF-8"> <title>图片向上切换</title> <style> .up{width:100%;height:120px;margin:200px auto 20px auto;text-align:center} .up img{width:150px;height:120px;} .down{width:100%;height:64px;text-align:center;} .down img{width:80px;} </style> <script src="jquery-1.9.1.js"></script> <script> $(function(){ $(".down img").click(function(){//获取所有的小图，点击事件 var addr=$(this).attr("src");//获取当前被点击的小图的src $(".up img").attr("src",addr);//把大图的src替换成小图的src }); }); </script></head><body> <div class="up"><img src="images/hot1.jpg" alt="hot1"></div> <div class="down"> <img src="images/hot1.jpg" alt="hot1"> <img src="images/hot2.jpg" alt="hot2"> <img src="images/hot3.jpg" alt="hot3"> <img src="images/hot4.jpg" alt="hot4"> </div></body></html>