脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS图片切换

JS图片切换的具体方法(带缩略图版)

 更新时间：2013年11月12日 16:29:54   作者：  
这篇文章介绍了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] = "https://www.jb51.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>  

您可能感兴趣的文章:

相关文章

  • JavaScript实现三种常用网页特效(offset、client、scroll系列)

    JavaScript实现三种常用网页特效(offset、client、scroll系列)

    这篇文章主要为大家介绍了三种常用的PC端网页特效：元素偏移量offset系列，元素可视区client系列和元素滚动scroll系列，文中示例代码介绍详细，需要的可以参考一下
    2021-12-12
  • 疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统

    疯掉了,尽然有js写的操作系统...
    2007-04-04
  • 使用javascript实现雪花飘落的效果

    使用javascript实现雪花飘落的效果

    本文主要介绍了使用javascript实现雪花飘落的特效，虽然网上有很多，不过都是比较陈旧了，兼容性不是太好，于是动手写一个，把思路和实现代码都分享给大家。
    2015-01-01
  • webpack -v报错解决方案

    webpack -v报错解决方案

    这篇文章主要介绍了webpack -v报错解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 详解bootstrap-fileinput文件上传控件的亲身实践

    详解bootstrap-fileinput文件上传控件的亲身实践

    这篇文章主要介绍了详解bootstrap-fileinput文件上传控件的亲身实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • 微信小程序实现保存图片到相册功能

    微信小程序实现保存图片到相册功能

    项目中有个保存二维码到相册的功能，所以涉及到用户是否授权相册权限的问题。这篇文章主要介绍了微信小程序实现保存图片到相册功能,需要的朋友可以参考下
    2018-11-11
  • Webpack ECMAScript 模块详解

    Webpack ECMAScript 模块详解

    ECMAScript 模块（ESM）是在 Web 中使用模块的规范， 所有现代浏览器均支持此功能，同时也是在 Web 中编写模块化代码的推荐方式，这篇文章主要介绍了Webpack ECMAScript 模块,需要的朋友可以参考下
    2023-12-12
  • JS生成唯一id的多种解决方案(非常实用)

    JS生成唯一id的多种解决方案(非常实用)

    在项目开发中我们常需要给某些数据定义一个唯一标识符,便于寻找关联,这篇文章主要给大家介绍了关于JS生成id的多种解决方案,文中介绍的方法都非常实用,需要的朋友可以参考下
    2023-10-10
  • 一文详解如何在前端使用JS进行分类汇总

    一文详解如何在前端使用JS进行分类汇总

    这篇文章主要给大家介绍了关于如何在前端使用JS进行分类汇总的相关资料,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,需要的朋友可以参考下
    2023-04-04
  • JavaScript和TypeScript中的void的具体使用

    JavaScript和TypeScript中的void的具体使用

    这篇文章主要介绍了JavaScript和TypeScript中的void的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论