js淡入淡出的圖片輪播效果代碼分享
更新時(shí)間：2021年09月17日 09:22:37 投稿：lijiao
這篇文章主要介紹了js淡入淡出的圖片輪播切換特效，圖片可以隨意替換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，推薦給大家，感興趣的小伙伴們可以參考一下
本文實(shí)例講述了淡入淡出的js圖片輪播效果代碼。分享給大家供大家參考。具體如下：
運(yùn)行效果圖：----------------------查看效果-----------------------
小提示：瀏覽器中如果不能正常運(yùn)行，可以嘗試切換瀏覽模式。
為大家分享的js圖片輪播效果代碼如下
<html>
<head>
<title>js圖片輪播效果代碼</title>
<style type="text/css">
table img:hover{cursor:pointer;}
</style>
</head>
<body>
<div align="center">
<SCRIPT>
var roll_image = new Array;
var image_link = new Array;
var small_img = new Array;
roll_image[0] = 'images/01.jpg';
image_link[0] = 'http://www.xxx.com';
small_img[0] = 'images/main_flash_button1_on.gif';
roll_image[1] = 'images/02.jpg';
image_link[1] = 'http://www.xxx.com';
small_img[1] = 'images/main_flash_button2_on.gif';
roll_image[2] = 'images/03.jpg';
image_link[2] = 'http://www.xxx.com';
small_img[2] = 'images/main_flash_button3_on.gif';
roll_image[3] = 'images/04.jpg';
image_link[3] = 'http://www.xxx.com';
small_img[3] = 'images/main_flash_button4_on.gif';
roll_image[4] = 'images/05.jpg';
image_link[4] = 'http://www.xxx.com';
small_img[4] = 'images/main_flash_button5_on.gif';
roll_image[5] = 'images/06.jpg';
image_link[5] = 'http://www.xxx.com';
small_img[5] = 'images/main_flash_button6_on.gif';
roll_image[6] = 'images/07.jpg';
image_link[6] = 'http://www.xxx.com';
small_img[6] = 'images/main_flash_button7_on.gif';
var cliImg = '';
var cliImgSrc = '';
var imgNo = Math.round(Math.random() * 7);
var interval = 3000;
var setTime = '';
function click_simg(ci, no){
var pImg = document.all.bigimg;
var pLink = document.all.imglink;
if(cliImg == '') {
cliImg = ci;
cliImgSrc = ci.src;
ci.src = small_img[no];
imgNo=no;
pImg.src =roll_image[no];
pLink.href = image_link[no];
} else if(cliImg != ci) {
cliImg.src = cliImgSrc;
cliImg = ci;
cliImgSrc = ci.src;
ci.src = small_img[no];
imgNo=no;
pImg.src =roll_image[no];
pLink.href = image_link[no];
}
clearTimeout(setTime);
setTime=setTimeout("rotate()",interval);
}
function rotate(){
imgNo = (imgNo >= 6) ? 0 : imgNo+1;
var ci = eval('document.all.num_img'+imgNo);
document.all.bigimg.filters.blendTrans.apply();
document.all.imglink.href=image_link[imgNo];
document.all.bigimg.src=roll_image[imgNo];
document.all.bigimg.filters.blendTrans.play();
if(cliImg == '') {
cliImg = ci;
cliImgSrc = ci.src;
ci.src = small_img[imgNo];
} else if(cliImg != ci) {
cliImg.src = cliImgSrc;
cliImg = ci;
cliImgSrc = ci.src;
ci.src = small_img[imgNo];
}
setTime=setTimeout("rotate()",interval);
}
//-->
</SCRIPT>
<TABLE cellSpacing=0 cellPadding=0 width=520 border=0>
<TBODY>
<TR>
<TD height=338>
<A onfocus=this.blur() href="#" name=imglink><IMG style="FILTER: blendTrans(duration=1)" height=338 src="images/01.jpg" width=520 border=0 name=bigimg></A>
</TD>
</TR>
<TR>
<TD height=27><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 0);" height=15
src="images/main_flash_button1.gif" width=61
border=0 name=num_img0></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 1);" height=15
src="images/main_flash_button2.gif" width=61
border=0 name=num_img1></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 2);" height=15
src="images/main_flash_button3.gif" width=61
border=0 name=num_img2></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 3);" height=15
src="images/main_flash_button4.gif" width=61
border=0 name=num_img3></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 4);" height=15
src="images/main_flash_button5.gif" width=61
border=0 name=num_img4></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 5);" height=15
src="images/main_flash_button6.gif" width=61
border=0 name=num_img5></TD>
<TD width=3></TD>
<TD width=61><IMG style="CURSOR: hand"
onclick="click_simg(this, 6);" height=15
src="images/main_flash_button7.gif" width=61
border=0 name=num_img6></TD>
<TD
width=72></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TBODY>
</TABLE>
<p>
<SCRIPT>rotate();</SCRIPT>
<br>
</div>
</BODY></HTML>
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是為大家分享的js圖片輪播效果代碼，希望大家可以喜歡。
相關(guān)文章
npm install jquery報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了npm install jquery報(bào)錯(cuò)問題解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
刷新頁面實(shí)現(xiàn)方式總結(jié)(HTML,ASP,JS)
多種方法實(shí)現(xiàn)頁面的刷新代碼2008-11-11
JavaScript利用正則表達(dá)式去除日期中的“-”
第一種，將日期字符串先截取，然后拼接；第二種，就是利用正則表達(dá)式去掉“-”本例選擇第二種，比較快捷不容易出錯(cuò)2014-07-07
FileReader?包含了一套完整的事件模型,用于捕獲讀取文件時(shí)的狀態(tài),下面這篇文章主要給大家介紹了關(guān)于JS前端文件讀取FileReader操作方法的相關(guān)資料,需要的朋友可以參考下2024-08-08
這篇文章主要是對(duì)JavaScript作用域和作用域鏈作簡(jiǎn)單的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript2013-12-12
js輸入中文效果...2006-09-09
使用JavaScript開發(fā)IE瀏覽器本地插件實(shí)例
這篇文章主要介紹了使用JavaScript開發(fā)IE瀏覽器本地插件實(shí)例,本文講解使用JS+注冊(cè)表的方式開發(fā)一個(gè)IE瀏覽器本地插件,需要的朋友可以參考下2015-02-02
基于JavaScript實(shí)現(xiàn)TAB標(biāo)簽效果
js實(shí)現(xiàn)tab標(biāo)簽效果，在項(xiàng)目中經(jīng)常用到，今天抽點(diǎn)時(shí)間把我寫的js實(shí)現(xiàn)tab標(biāo)簽效果源碼分享給大家，對(duì)js tab標(biāo)簽代碼需要的朋友參考下2016-01-01
JavaScript利用油猴腳本實(shí)現(xiàn)去水印功能
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用油猴腳本實(shí)現(xiàn)去水印功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
javascript 數(shù)組(list)添加/刪除的實(shí)現(xiàn)
這篇文章主要介紹了javascript 數(shù)組(list)添加/刪除，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12