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


Posted in Javascript onAugust 24, 2015

本文实例讲述了淡入淡出的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.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图片轮播效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
深入学习JavaScript对象
Oct 13 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 #Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
You might like
PHP浮点数的一个常见问题
2016/03/10 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PDO::quote讲解
2019/01/29 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python类继承用法实例分析
2015/05/27 Python
解决Python传递中文参数的问题
2015/08/04 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
Python实现数值积分方式
2019/11/20 Python
优秀党员主要事迹
2014/01/19 职场文书
年度考核自我鉴定
2014/02/02 职场文书
运动会入场解说词
2014/02/07 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
数学检讨书1000字
2014/02/24 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
新课程改革心得体会
2016/01/22 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android