JS實現(xiàn)的簡單圖片切換功能示例【測試可用】
更新時間：2017年02月14日 10:22:41 作者：風起從容
這篇文章主要介紹了JS實現(xiàn)的簡單圖片切換功能,結(jié)合實例形式分析了javascript結(jié)合時間函數(shù)定時觸發(fā)控制圖片的遍歷與切換操作相關(guān)技巧,需要的朋友可以參考下
本文實例講述了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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片切換</title>
</head>
<body><script language="JavaScript1.1">
<!--
var slidespeed=2000
var slideimages=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg")
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
window.location=slidelinks[whichlink]
}
//-->
</script>
<img src="images/1.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)">
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
您可能感興趣的文章:
- 最簡單的js圖片切換效果實現(xiàn)代碼
- 用html+css+js實現(xiàn)的一個簡單的圖片切換特效
- 純js實現(xiàn)背景圖片切換效果代碼
- 簡單的實現(xiàn)點擊箭頭圖片切換的js代碼
- 純js無flash仿搜狐女人頻道FLASH圖片切換效果代碼
- javascript實現(xiàn)圖片切換的幻燈片效果源代碼
- JavaScript 圖片切換展示效果alibaba拓展版
- jQuery圖片切換插件jquery.cycle.js使用示例
- JS圖片切換的具體方法(帶縮略圖版)
- js鼠標點擊圖片切換效果代碼分享
- CSS+Js遮罩效果的TAB及焦點圖片切換(推薦)
- js+div實現(xiàn)文字滾動和圖片切換效果代碼
- js鼠標點擊圖片切換效果實現(xiàn)代碼
相關(guān)文章
一個網(wǎng)頁打印相關(guān)功能的擴展演示特效，在實現(xiàn)了打印功能外，還實現(xiàn)了打印預覽、打印前的頁眉頁腳設(shè)置，直接打印等功能，以前對JS打印前設(shè)置頁腳見的不多，所以這一個也算是挺有價值的，希望閑暇時參閱2013-05-05
微信小程序并沒有提供搖一搖API接口，但是提供了一個重力感應的API，接下來我們可以用這個方法來模擬微信搖一搖功能，具體實現(xiàn)代碼，大家參考下本文2017-07-07
改變文件域的樣式實現(xiàn)思路同時兼容ie、firefox
正如標題所言只是模擬了file文件域的外觀，其實起作用的還是文件域file，這樣就很方便，感興趣的朋友可以了解下2013-10-10
在wabpack 核心功能除了loader應該就是plugins插件了，本文主要介紹了Webpack4 plugins 實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
javascript中callee與caller的用法和應用場景
javascript中callee和caller的用法和應用場景分析，需要的朋友可以參考下。2010-12-12
這篇文章主要為大家詳細介紹了微信小程序如何獲取手機驗證碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
開發(fā)過程中用寫的一個腳本，記錄下來以備后用與他用，其中attributes["max"].nodeValue是取HTML自定義的 max屬性（兼容Firefox和IE）2010-10-10
對比分析Django的Q查詢及AngularJS的Datatables分頁插件
通過本文給大家對比分析了Django的Q查詢及AngularJS的Datatables分頁插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
基于JavaScript的操作系統(tǒng)，你聽說過嗎？小編也是第一次聽說，接觸，和大家一起了解一下2016-01-01
這篇文章主要給大家介紹了關(guān)于自定義Egg.js的請求級別日志的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12