js淡入淡出的圖片輪播效果代碼分享
本文實例講述了淡入淡出的js圖片輪播效果代碼。分享給大家供大家參考。具體如下:
運行效果圖:----------------------查看效果-----------------------
小提示:瀏覽器中如果不能正常運行,可以嘗試切換瀏覽模式。
為大家分享的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)文章
iscroll動態(tài)加載數(shù)據(jù)完美解決方法
這篇文章主要為大家詳細介紹了iscroll動態(tài)加載數(shù)據(jù)的完美解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07使用JavaScript解決網(wǎng)頁圖片拉伸問題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁圖片拉伸問題,本文給大家介紹的非常詳細,具有參考借鑒價值,感興趣的朋友一起看看吧2016-11-11js實現(xiàn)類bootstrap模態(tài)框動畫
這篇文章主要為大家詳細介紹了js實現(xiàn)類bootstrap模態(tài)框動畫的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02Firefox中beforeunload事件的實現(xiàn)缺陷淺析
beforeunload 指在頁面卸載前提供的最后一次JS執(zhí)行的機會2012-05-05