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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
Element实现动态表格的示例代码
Aug 02 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下10件你也许并不了解的事情
2008/09/11 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
记录几个javascript有关的小细节
2007/04/02 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
js实现搜索栏效果
2018/11/16 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
Python是编译运行的验证方法
2015/01/30 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
致400米运动员广播稿
2014/02/07 职场文书
保护环境倡议书300字
2014/05/19 职场文书
宣传普通话标语
2014/06/27 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server