jq书写点击换图

简介: jq书写点击换图

先上效果图:


 

css 代码:

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.     }

html代码:

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>

jq 代码 :

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.     })

 

ok!一个简单的图片切换完成了

相关文章
|
7月前
|
JavaScript 前端开发
Vue3解析markdown解析并实现代码高亮显示
Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。 Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。
403 0
Vue3解析markdown解析并实现代码高亮显示
|
11天前
|
JavaScript 前端开发 CDN
jquery的书写格式,简单的使用方法
jquery的书写格式,简单的使用方法
26 4
|
8月前
|
JavaScript
js简单全选及反选demo效果示例(整理)
js简单全选及反选demo效果示例(整理)
|
8月前
|
JavaScript
jQuery跟随提示信息
jQuery跟随提示信息
|
8月前
|
JavaScript
js限制文字字数--点击展开点击收起demo效果示例(整理)
js限制文字字数--点击展开点击收起demo效果示例(整理)
|
JavaScript 测试技术
Easyui 修改jquery validatebox为英文校验提示为中文提示
Easyui 修改jquery validatebox为英文校验提示为中文提示
82 0
|
前端开发 CDN
jq超级简易选项卡案例
jq超级简易选项卡案例
200 0
|
JavaScript 前端开发
|
JavaScript
JQ效果:随便看看
$(function($){     $.fn.changeList = function(options){         var defaults = {                     tag : 'li', // tab name                    subName : '.
825 0