代码语言:javascript复制
<!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>