文章导航PC6首页软件下载单机游戏安卓资源苹果资源

pc软件新闻网络操作系统办公工具编程服务器软件评测

安卓新闻资讯应用教程刷机教程安卓游戏攻略tv资讯深度阅读综合安卓评测

苹果ios资讯苹果手机越狱备份教程美化教程ios软件教程mac教程

单机游戏角色扮演即时战略动作射击棋牌游戏体育竞技模拟经营其它游戏游戏工具

网游cf活动dnf活动lol周免英雄lol礼包

手游最新动态手游评测手游活动新游预告手游问答

您的位置:首页资讯教程编程开发 → (带缩略图版)JS图片切换代码

(带缩略图版)JS图片切换代码

时间:2011/11/2 9:30:00来源:www.pc6.com作者:lff我要评论(0)

以下是js图片切换代码,这个代码是可以实现带缩略图的哦。

<!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>   

更多 0

相关阅读 JAVA开发精彩教程:JSF系列(二)Java开发精彩教程:JSF系列(三)使用Resin在NT环境下配置JSP环境!JSP编程进度条实现方法用WebWork、JSP、Velocity建立注册页面ASP.NET、JSP及PHP之间的抉择JSP(JavaServer Pages)简介Tomcat+Jsp环境下的中文问题

文章评论
发表评论

热门文章 TIOBE 2014年11月编程

最新文章 plsql developer怎么使plsql developer怎么连 visual studio最新版怎么安装eclipse字体大小怎么设置 eclipse字体大小Android Studio使用教程图文详解C#中正则表达式使用教程

人气排行 安卓模拟器BlueStacks安装使用教程php显示错误信息方法oracle查看实例名方法(带缩略图版)JS图片切换代码安装sql server 2000 序列号无法验证delphi odac安装方法讲解bat创建快捷方式技巧关于Delphi内存表的使用说明