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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
Node.js学习入门
Jan 03 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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 上传功能实例代码
2010/04/13 PHP
php debug 安装技巧
2011/04/30 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python之字典添加元素的几种方法
2020/09/30 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
数据库连接池的工作原理
2012/09/26 面试题
小学语文课后反思精选
2014/04/25 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL