JS图片切换的具体方法(带缩略图版)


Posted in Javascript onNovember 12, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>五屏带缩略图幻灯片切换代码</title> 
<style> 
BODY {  
    FONT-SIZE: 9pt; BACKGROUND: #d8d8d8; MARGIN: 0px auto; COLOR: #505050; FONT-FAMILY: 宋体,arial,verdana,sans-serif,fantasy,tahoma; TEXT-DECORATION: none; background1: #c8e4f2  
}  
A {  
    TEXT-DECORATION: none  
}  
A:link {  
    COLOR: #505050; color1: #54564c  
}  
A:visited {  
    COLOR: #505050; color1: #54564c  
}  
A:hover {  
    COLOR: #d40005; TEXT-DECORATION: underline  
}  
A:active {  
    COLOR: #f30  
}  
IMG {  
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px  
}  
.box {  
    FLOAT: left; WIDTH: 472px  
}  
.box .boxpadding {  
    PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 8px; PADDING-TOP: 8px  
}  
#Slide {  
    CLEAR: both; BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; WIDTH: 450px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 335px  
}  
#Slide A {  
    COLOR: #000  
}  
.img {  
    BORDER-RIGHT: #fff 1px solid; BACKGROUND: #fff; MARGIN: 0px auto; BORDER-LEFT: #fff 1px solid; TEXT-ALIGN: center  
}  
.boxpadding {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BACKGROUND: #f8f8f8; MARGIN-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #fff 1px solid  
}  
 
.thumb_title {  
    MARGIN-TOP: 10px; BACKGROUND: #fff; FILTER: alpha(opacity=30); WIDTH: 450px; TEXT-INDENT: 10px; LINE-HEIGHT: 25px; POSITION: absolute; HEIGHT: 25px; -moz-opacity: 0.3  
}  
#Slide_Thumb {  
    MARGIN-TOP: 257px; MARGIN-LEFT: 0px; POSITION: absolute  
}  
.thumb_on {  
    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  
}  
.thumb_off {  
    DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 8px; CURSOR: pointer  
}  
.thumb_off {  
    FILTER: alpha(opacity=50); -moz-opacity: 0.5  
}  
.thumb_on {  
    FILTER: alpha(opacity=100); -moz-opacity: 1  
}  
.thumb_off IMG {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; MARGIN-TOP: 12px; BORDER-LEFT: #fff 1px solid; WIDTH: 75px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 56px  
}  
.thumb_on IMG {  
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; WIDTH: 91px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 68px  
}  
</style> 
</head> 
<body> 
<table width="472" height="511" border="0" align="center" cellpadding="0" cellspacing="0"> 
  <tr> 
    <td width="472"><div class=box style="MARGIN-BOTTOM: 8px"> 
      <div class=boxpadding> 
        <div id=Slide> <a id=foclnk   
href="/" target=_blank> 
<img id=focpic style="FILTER: RevealTrans(duration=1;ransition=12); VISIBILITY: visible; POSITION: absolute; left:484; top:94"   
src="/jscss/demoimg/wall1.jpg" width="450" height="335" /></a> 
            <div class=thumb_title id=foctitle><a href="/"   
target=_blank>图一</a></div> 
          <div id=Slide_Thumb> 
              <div class=thumb_on id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><a   
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall1.jpg" /></a></div> 
              <div class=thumb_off id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><a   
href="/" target=_blank><img alt="图二" src="/jscss/demoimg/wall2.jpg" /></a></div> 
              <div class=thumb_off id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><a   
href="/" target=_blank><img alt="图三" src="/jscss/demoimg/wall3.jpg" /></a></div> 
              <div class=thumb_off id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><a   
href="/" target=_blank><img alt="图四" src="/jscss/demoimg/wall4.jpg" /></a></div> 
              <div class=thumb_off id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><a   
href="/" target=_blank><img alt="图五" src="/jscss/demoimg/wall5.jpg" /></a></div> 
              <script language=javascript type=text/javascript> 
var picarry = {};  
var lnkarry = {};  
var ttlarry = {};  
picarry[0] = "https://3water.com/jscss/demoimg/wall1.jpg";  
lnkarry[0] = "/";  
ttlarry[0] = "图一";  
picarry[1] = "/jscss/demoimg/wall2.jpg";  
lnkarry[1] = "/";  
ttlarry[1] = "图二";  
picarry[2] = "/jscss/demoimg/wall3.jpg";  
lnkarry[2] = "/";  
ttlarry[2] = "图三";  
picarry[3] = "/jscss/demoimg/wall4.jpg";  
lnkarry[3] = "/";  
ttlarry[3] = "图四";  
picarry[4] = "/jscss/demoimg/wall5.jpg";  
lnkarry[4] = "/";  
ttlarry[4] = "图五";  
      </script> 
            </div> 
        </div> 
      </div> 
    </div></td> 
  </tr> 
</table> 
<div align="center"> 
<SCRIPT type=text/javascript> 
var currslid = 0;  
var slidint;  
function setfoc(id){  
    document.getElementById("focpic").src = picarry[id];  
    document.getElementById("foclnk").href = lnkarry[id];  
    document.getElementById("foctitle").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';  
    currslid = id;  
    for(i=0;i<5;i++){  
        document.getElementById("tmb"+i).className = "thumb_off";  
    };  
    document.getElementById("tmb"+id).className ="thumb_on";  
    focpic.style.visibility = "hidden";  
    focpic.filters[0].Apply();  
    if (focpic.style.visibility == "visible") {  
        focpic.style.visibility = "hidden";  
        focpic.filters.revealTrans.transition=23;  
    }  
    else {  
        focpic.style.visibility = "visible";  
        focpic.filters[0].transition=23;  
    }  
    focpic.filters[0].Play();  
    stopit();  
}  
 
function playnext(){  
    if(currslid==4){  
        currslid = 0;  
    }  
    else{  
        currslid++;  
    };  
    setfoc(currslid);  
    playit();  
}  
function playit(){  
    slidint = setTimeout(playnext,4500);  
}  
function stopit(){  
    clearTimeout(slidint);  
    }  
window.onload = function(){  
    playit();  
}</SCRIPT> 
</div> 
</body> 
</html>  
Javascript 相关文章推荐
isArray()函数(JavaScript中对象类型判断的几种方法)
Nov 26 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
React事件处理的机制及原理
Dec 03 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 #Javascript
判定是否原生方法的JS代码
Nov 12 #Javascript
You might like
php设计模式 State (状态模式)
2011/06/26 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
AngularJS ng-bind-template 指令详解
2016/07/30 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
python操作列表的函数使用代码详解
2017/12/28 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python基于requests库爬取网站信息
2020/03/02 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
如何书写邀请函?
2019/06/24 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
python自动化八大定位元素讲解
2021/07/09 Python