松江醉白池网站建设,南宁网站建设速成培训,wordpress 插件中心,网站域名服务器JQuery实现切换图片相对比较简单#xff0c;直接贴代码了哈#xff0c;有注释噢#xff01;疑问请追加评论哈#xff0c;不足之处还请大佬们指出#xff01;
1、案例代码#xff1a;
demo.html#xff1a;
!DOCTYPE htmlhtmlhead me…JQuery实现切换图片相对比较简单直接贴代码了哈有注释噢疑问请追加评论哈不足之处还请大佬们指出
1、案例代码
demo.html
!DOCTYPE htmlhtmlhead meta charsetutf-8 titleJQuery实现点击按钮切换图片/title style typetext/css *{ margin:0; padding:0; } .box{ text-align: center;/*将box里的内容居中显示*/ } .btn{ display: inline-blocki;/*让a标签变成行内块级元素*/ height: 30px; line-height: 30px; border:1px solid #ccc; text-decoration: none; color: #333; padding: 5px; font-size: 12px; } .btn:active{ background-color: #666; color: white; } /style/headbody div classbox img srcimages/1.jpg altpic idimg p a hrefjavascript:; classbtn data-controllast上一页/a a hrefjavascript:; classbtn data-controlnext下一页/a /p /divscript srcjs/jquery-3.2.1.min.js/scriptscript typetext/javascript var imgs [//定义数组用来存储图片的路径 images/1.jpg, images/2.jpg, images/3.jpg, images/4.jpg, images/5.jpg, images/6.jpg ]; var index 0;//设置第一张图片的索引值为0 var len imgs.length;//获取存储图片数组的长度 $(.btn).on(click,function(){//绑定点击事件 if($(this).data(control) last){ //如果写成 $(this).data(control) last是对的 //如果写成 $(this).data(control) last那就始终为真了没意义 //如果写成 last $(this).data(control)是对的 //如果写成 last $(this).data(control)语句就会报一个错误 // index--; // if(index0){ // index 0; // } // index--; index Math.max(0,--index);//如果index的值小于0使index为0 }else index Math.min(len-1, index);//如果index大于了数组长度 使index等于数组长度减一的值 document.title (index 1) / len;//改变标题内容 $(#img).attr(src,imgs[index]);//动态改变图片的路径 });/script/body/html
2、Effect Picture 案例源码文件JQuery实现点击按钮切换图片.zip
更多专业前端知识请上
【猿2048】www.mk2048.com
