<!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] = "http://www.codefans.net/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>
分享到:
相关推荐
JS图片切换,带缩略图版.rarJS图片切换,带缩略图版.rarJS图片切换,带缩略图版.rarJS图片切换,带缩略图版.rarJS图片切换,带缩略图版.rar
js 图片切换 箭头 缩略图 大图 能够判断第一个和最后一个
1、鼠标点击缩略图片显示大图片 2、缩略图片可自动控制,点击最后一张小图片时会自动向左(右)移动一张图片,并且有按钮控制所有缩略图片
附带缩略图的JS图片切换代码
原生js图片淡出淡进底部带缩略图的图片切换代码
Js实现图片幻灯切换效果-带缩略图,缩略图还带有动画移动效果哦,每张切换的图片都可以对应显示说明文字,而且也是带动画效果的。从风格上看,设计风格大气漂亮,通用于各类型的网站。
js图片幻灯片带缩略图,支持多种样式 javascript js 图片切换 图片轮换 缩略图
jquery.flexslider.js图片切换插件带缩略图
原生js91手机iphone频道带缩略图的焦点图片切换代码 原生js91手机iphone频道带缩略图的焦点图片切换代码 原生js91手机iphone频道带缩略图的焦点图片切换代码
很漂亮的JS图片切换特效,鼠标划过缩略图大图就跟着变化,纯JS实现,调用很方便。
原生js焦点图3屏带缩略图选项卡图片切换代码 原生js焦点图3屏带缩略图选项卡图片切换代码 原生js焦点图3屏带缩略图选项卡图片切换代码
JavaScript 带缩略图导航的五屏图片切换代码,来自千龙网,绝对实用的图片特效,带缩略图图片切换也是目前使用最为广泛的图片展示效果,本图片特效在兼容性方面做的也很不错,兼容众多主流浏览器,你还可以把它转换...
仿门户网站带缩略图jQuery图片相册切换特效代码,非常不错的相册展示JS特效代码,带缩略预览图、 带图片文字描述、带左右切换箭头、图片播放到第一张或最后一张时,会提示是否重播图片。
左边是banner图,右边是缩略图,当鼠标滑入缩略图时,也会切换图片。 一、这段是html代码,可以直接拷贝,需要自己准备相同大小的banner图,例中图片都是500×300 <!DOCTYPE html> <html lang=en> <...
四屏缩略图图片切换JS版,形式经典,四幅图片轮流显示,代码有一个函数封装文件,有一个类似页卡的函数.设置对应内容的隐藏和显示 obj:元素的id name:元素对应的name属性的值, t:对应内容的标签 num:当前选择的元素...
原生js图片插件缩略图片控制大图淡出淡进切换支持图片轮播切换
原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换 原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换 原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换
js带缩略图多组图片相册切换是一款原生js带缩略图标题文字描述的多组图片相册幻灯片切换。