<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片切換</title>
<script type="text/javascript">
/*調用函數方法*/
/*定義數組來保存要切換的圖片*/
var imgs = ["img/bird.jpg","img/h5.jpg","img/a.jpg"];
/*設置變量控制圖片循環*/
var count = 0;
var changeimg = function(){
var img = document.getElementById("img");
img.src=imgs[count++];
if(count==3) count=0;
}
</script>
</head>
<body>
<img src="img/a.jpg" id="img" width="200px" height="200px" onclick="changeimg()"/>
<!--流方法，不用調用函數【***不需要在img標籤中設置onclick屬性***】
<script type="text/javascript">
var imgs = ["img/bird.jpg","img/h5.jpg","img/a.jpg"];
var count = 0;
<!--使用document對象獲取img-->
document.getElementById("img").οnclick=function(){
this.src=imgs[count++];
if(count==3){
count=0;
}
}
</script>
-->
</body>
</html>
JavaScript實現簡單的圖片切換【靜態點擊切換】
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
前端編程-如何糾錯-學習筆記
如何糾錯設置背景法 找出相應盒子的區域，通過區域來判斷問題的起因，比如“父級元素的高度自適應問題” 逐步刪除法 在“設置背景”仍無法解決找出問題原因的情況下，可將頁面“另存爲”一
display：none的表單也會被提交
如題 1、單區域設置爲display:none也會被提交 2、設置爲disabled 屬性的表單的不會被提交 3、表單多個同名字段，在前面的生效,多個字段可以用數組的形式
日期與數組與字符串的方法複習總結
一 Date對象 1 Date函數接收時間戳 date.getTime() date date.valueOf()//返回值 : date 的毫秒錶示。返回值和方法 Date.getTime