js淡入淡出的图片轮播效果代码分享

2019-11-20 11:44:13

字体：大中小

来源：转载

供稿：网友

本文实例讲述了淡入淡出的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.lanrentuku.com';small_img[0] = 'images/main_flash_button1_on.gif';roll_image[1] = 'images/02.jpg';image_link[1] = 'http://www.lanrentuku.com';small_img[1] = 'images/main_flash_button2_on.gif';roll_image[2] = 'images/03.jpg';image_link[2] = 'http://www.lanrentuku.com';small_img[2] = 'images/main_flash_button3_on.gif';roll_image[3] = 'images/04.jpg';image_link[3] = 'http://www.lanrentuku.com';small_img[3] = 'images/main_flash_button4_on.gif';roll_image[4] = 'images/05.jpg';image_link[4] = 'http://www.lanrentuku.com';small_img[4] = 'images/main_flash_button5_on.gif';roll_image[5] = 'images/06.jpg';image_link[5] = 'http://www.lanrentuku.com';small_img[5] = 'images/main_flash_button6_on.gif';roll_image[6] = 'images/07.jpg';image_link[6] = 'http://www.lanrentuku.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图片轮播效果代码，希望大家可以喜欢。

上一篇：基于jquery实现在线选座订座之影院篇

下一篇：jquery地址栏链接与a标签链接匹配之特效代码总结