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 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
快速入门Vue
Dec 19 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 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 strtok()函数的优点分析
2010/03/02 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
vue实现循环切换动画
2018/10/17 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python实现自动整理文件的脚本
2020/12/17 Python
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
法定授权委托证明书
2014/09/27 职场文书
公司合作协议范文
2014/10/01 职场文书
2015最新民情日记范文
2015/06/26 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python
MySQL创建表操作命令分享
2022/03/25 MySQL