JavaScript實現(xiàn)自動切換圖片代碼
更新時間:2016年10月11日 15:24:33 作者:yangzailu
本文給大家分享一段js代碼實現(xiàn)自動切換圖片的代碼,代碼非常簡單,應(yīng)用領(lǐng)域非常廣泛,感興趣的朋友一起看看吧
本文給大家分享一段js代碼實現(xiàn)自動切換圖片的實例代碼,代碼如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
window.onload=init;
var n=1; //圖片標(biāo)記數(shù)
var dingshi; //讓圖片動的定時器
function init(){
dingshi=window.setInterval("tupian()",1000);
}
//更換圖片
function tupian(){
var obj=document.getElementById("img1");
n++;
if(n>=4){
n=1;
}
obj.src="yaj_"+n+".jpg";
}
//鼠標(biāo)放上圖片停止
function stoptupian(){
window.clearInterval(dingshi);
}
//鼠標(biāo)離開圖片動起來
function dongqilai(){
dingshi=window.setInterval("tupian()",1000);
}
</script>
</head>
<body>
<img src="yaj_1.jpg" onmouseover="stoptupian()" onmouseout="dongqilai()" id="img1">
</body>
</html>
以上所述是小編給大家介紹的JavaScript實現(xiàn)自動切換圖片代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
您可能感興趣的文章:
- js鼠標(biāo)點擊按鈕切換圖片-圖片自動切換-點擊左右按鈕切換特效代碼
- JS鼠標(biāo)滑過圖片時切換圖片實現(xiàn)思路
- js動態(tài)切換圖片的方法
- 使用JavaScript實現(xiàn)點擊循環(huán)切換圖片效果
- 原生JS實現(xiàn)隱藏顯示圖片 JS實現(xiàn)點擊切換圖片效果
- js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- JavaScript簡單實現(xiàn)鼠標(biāo)移動切換圖片的方法
- 圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼
- javascript實現(xiàn)點擊按鈕切換圖片
- JS實現(xiàn)點擊button按鈕切換圖片
相關(guān)文章
JS如何使用正則表達(dá)式(match)截取括號中的文字和數(shù)字
正則表達(dá)式是一種用來匹配文本模式的工具,這篇文章主要給大家介紹了關(guān)于JS如何使用正則表達(dá)式(match)截取括號中文字和數(shù)字的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法舉例講解
作為一名剛?cè)胄械拈_發(fā)者,你可能會遇到需要在JavaScript中引用JSON文件的情況,下面這篇文章主要給大家介紹了關(guān)于JS導(dǎo)入本地json文件數(shù)據(jù)的三類方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
推薦一個封裝好的getElementsByClassName方法
這篇文章主要推薦一個封裝好的getElementsByClassName方法,需要的朋友可以參考下2014-12-12
JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件
這篇文章主要介紹了JavaScript事件學(xué)習(xí)小結(jié)(五)js中事件類型之鼠標(biāo)事件的相關(guān)資料,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
深入淺析JavaScript中對事件的三種監(jiān)聽方式
最近這段時間因為每天要修改網(wǎng)站,為網(wǎng)站做特效,所以看了很多的js接觸事件,自己只會使用一小部分,有時用的時候也比較混亂,現(xiàn)在系統(tǒng)的整理了一下,本篇文章跟大家分享的是JavaScript中對事件的三種監(jiān)聽方式2015-09-09

