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

2016-05-16 15:42 1614浏览原创

本文实例讲述了淡入淡出的js图片轮播效果代码。分享给大家供大家参考。具体如下：

运行效果图：----------------------查看效果-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js图片轮播效果代码如下



<title>js图片轮播效果代码</title><style type="text/css">
table img:hover{cursor:pointer;}
</style><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) &#63; 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">@@##@@</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">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="3"></td>
  <td width="61">@@##@@</td>
  <td width="72"></td>
  </tr></tbody></table></td>
 </tr>
</tbody></table>
<p>
 <script>rotate();</script><br></p>
</div>

以上就是为大家分享的js图片轮播效果代码，希望大家可以喜欢。