js圖片自動(dòng)切換效果處理代碼
更新時(shí)間：2013年05月07日 17:53:46 作者：
自己設(shè)置每張圖片切換的時(shí)間間隔，自己設(shè)置每張圖片的路徑（絕對(duì)、相對(duì)路徑都可以）雖然很簡(jiǎn)單，但是很實(shí)用
復(fù)制代碼 代碼如下:
<script language =javascript >
var curIndex=0;
//時(shí)間間隔 單位毫秒
var timeInterval=1000;
var arr=new Array();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
arr[4]="5.jpg";
arr[5]="6.jpg";
arr[6]="7.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("obj");
if (curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<img id=obj src ="1.jpg" border =0 />
可以自己配置，自己設(shè)置每張圖片切換的時(shí)間間隔，自己設(shè)置每張圖片的路徑（絕對(duì)、相對(duì)路徑都可以）
雖然很簡(jiǎn)單，但是很實(shí)用。
復(fù)制代碼 代碼如下:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片自動(dòng)跳轉(zhuǎn)</title>
<script language="javascript">
setInterval(test,1000);
var array=new Array();
var index=0;
var array= new Array("image/1.jpg","image/2.jpg","image/3.jpg","image/4.jpg","image/5.jpg","image/6.jpg","image/7.jpg","image/8.jpg","image/9.jpg","image/10.jpg");
function test()
{ var myimg=document.getElementById("imgs");
if(index==array.length-1)
{ index=0; }else{ index++; }
myimg.src=array[index];
}
</script>
</head>
<body >
<img id="imgs" src="image/1.jpg" /> </body>
</html>
您可能感興趣的文章:
- 最簡(jiǎn)單的js圖片切換效果實(shí)現(xiàn)代碼
- 用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
- 一段非常簡(jiǎn)單的讓圖片自動(dòng)切換js代碼
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
- 純js實(shí)現(xiàn)背景圖片切換效果代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- 簡(jiǎn)單的實(shí)現(xiàn)點(diǎn)擊箭頭圖片切換的js代碼
- css圖片切換效果代碼[不用js]
- JS鼠標(biāo)滑過(guò)圖片時(shí)切換圖片實(shí)現(xiàn)思路
- JavaScript實(shí)現(xiàn)切換多張圖片
相關(guān)文章
基于JS制作一個(gè)網(wǎng)頁(yè)版的猜數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
如果你不能向一個(gè)六歲的孩子解釋清楚，那么其實(shí)你自己根本就沒(méi)弄懂。好吧，我試著向一個(gè)27歲的朋友就是JS閉包(JavaScript closure)卻徹底失敗了2011-10-10
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__，深入學(xué)習(xí)了三個(gè)用來(lái)訪問(wèn)prototype的方法，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript瀑布流的實(shí)現(xiàn)你學(xué)會(huì)了嗎
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了RxJS在TypeScript中的簡(jiǎn)單使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
相信好多小伙伴在使用getUserInfo獲取小程序用戶昵稱和頭像時(shí)卻獲取不到,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄獲取不到頭像和昵稱的詳細(xì)解決辦法,需要的朋友可以參考下2022-12-12
在日常開(kāi)發(fā)中,使用uniapp開(kāi)發(fā)項(xiàng)目有時(shí)會(huì)遇到需要覆蓋組件的問(wèn)題,但由于某些組件的渲染優(yōu)先級(jí)過(guò)高,例如video,map ,在小程序中只能使用cover-view去覆蓋,這篇文章主要給大家介紹了關(guān)于uniapp小程序視圖容器cover-view使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
javascript代碼優(yōu)化的8點(diǎn)總結(jié)
本篇文章給大家分享了關(guān)于javascript代碼優(yōu)化的8點(diǎn)總結(jié)，希望我們整理的內(nèi)容能夠幫助到大家。2018-01-01
JavaScript基本語(yǔ)法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語(yǔ)法，適合剛?cè)腴T的同學(xué)，有興趣的可以了解下。2017-06-06
JavaScript實(shí)現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的反序列化json字符串操作,結(jié)合實(shí)例形式分析了eval與JSON.parse兩種反序列化json字符串的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07