jq书写点击换图

1. *{
2.      margin: 0;
3.      padding: 0;
4.    }
5.    .box{
6.      width: 500px;
7.      height: 500px;
8.      background: #e5e5e5;
9.      margin: 0 auto;
10.     }
11.     .box div{
12.       width: 400px;
13.       height: 300px;
14.       margin: 0 auto;
15.     }
16.     .box div img{
17.       width: 400px;
18.       height: 300px;
19. 
20.     }
21.     .box ul{
22.       width: 400px;
23.       height: 300px;
24.       margin: 0 auto;
25.     }
26.     .box ul li{
27.       list-style: none;
28.     }
29.     .box ul li img{
30.       width: 80px;
31.       height: 80px;
32.       float: left;
33.       margin-left: 10px;
34.       margin-top: 10px;
35.     }
36.     .box ul li:first-child img{
37.       border: 3px solid #f00;
38.     }

1. <div class="box">
2.      <div>
3.        <img src="img/1.jpg" />
4.      </div>
5.      <ul>
6.        <li>
7.          <img src="img/1.jpg" />
8.        </li>
9.        <li><img src="img/2.jpg" /></li>
10.         <li><img src="img/3.jpg" /></li>
11.         <li><img src="img/4.jpg" /></li>
12.         <!--<li><img src="img/5.jpg" /></li>
13.         <li><img src="img/6.jpg" /></li>
14.         <li><img src="img/7.jpg" /></li>-->
15.       </ul>
16.     </div>

1. $(".box ul img").on("click",function(){
2.      //点击img 时让他加边框
3.      $(this).css("border","3px solid #f00").parent().siblings().children().css("border","none")
4.      // 点击换图 
5.      // 1. 获取点击图片的路径
6.      var oImg=$(this).attr("src")
7.      console.log(oImg)
8.      //2. 换图操作 
9.      $(".box div img").attr("src",oImg)
10. 
11. 
12.     })