[jQuery笔记] 小图片切换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小图片切换示例</title> <script src="js/jquery-1.8.3.min.js"></script> <style> //定义img标签的宽度和高度 img{ width:500px; height:300px } </style> <!-- 如果js写在body上面，就需要在code前面加上$(function(){CODE};) --> <script> $(function(){ var i=1 $("#btn").click(function(){ //console.log("aaa"); //操作图片,prop(属性，值);prop() 方法设置或返回被选元素的属性和值。 $("img").prop("src","img/"+i+".jpg"); i++; if(i>5)i=1; }); }) </script> </head> <body> <img src="img/5.jpg"> <button type="button" id="btn">切换图片</button> <!-- <script> var i=1 $("#btn").click(function(){ //console.log("aaa"); $("img").prop("src","img/"+i+".jpg"); i++; if(i>5)i=1; }); </script> --> </body> </html>
