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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
详解Django的CSRF认证实现
2018/10/09 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
城市轨道专业个人求职信范文
2013/09/23 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
大学生操行评语大全
2014/12/31 职场文书
男方婚前保证书
2015/02/28 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书