本文介绍用javascript制作图片轮换效果，原理很简单，就是设置延时执行一个切换函数，函数里面是先设置下面的缩略图列表的白框样式，再设置上面大图的src属性，在IE中显示很正常，可是在FF中会有变成先显示上面的大图

<!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=utf-8" />
<title>无标题文档</title>
<style>
body{ font-family:Arial, Verdana, Helvetica, sans-serif, "宋体"; font-size:14px;}
a{ color:#fff;}
img{ border:0;}
#picBox{ width:335px; border:1px solid #000; height:317px; position:relative;}
.pic img{ width:335px; height:251px; filter:BlendTrans(duration=1);}
.txtbg{height:40px; background:#000; position:relative; margin-top:-40px; filter:alpha(opacity=50); opacity:0.5;}
.text{ line-height:40px; text-align:center;position:relative; margin-top:-40px;}
.thumbs{ position:absolute; margin-top:-4px;}
.thumbs a{ padding-top:4px; position:relative; cursor:pointer; float:left; margin-right:-3px; width:86px; height:66px;}
.thumbs img{ border:3px solid #777; width:80px; height:60px;}
.thumbs .cur{ background:url(http://img1.cn.msn.com/1/arrow2.gif) no-repeat center top; z-index:2;}
.thumbs .cur img{ border-color:#fff;}
</style>
</head>
<body>
<div id="picBox">
 <div class="pic"><a href="1"><img src="http://www.98desk.com/d/0/5/84/2006110819532871609.jpg" id="curPic" /></a></div>
 <div class="txtbg"></div>
    <div class="text"><a id="picLink" href="#">news link 图片链接</a></div>
    <div class="thumbs" id="thumbList">
     <a id="thumb_0" href="1"><img src="http://www.98desk.com/d/0/5/84/2006110819532871609.jpg" title="aaaaaa"/></a>
        <a id="thumb_1" href="2"><img src="http://pic.yule13.com/big/ktdm/200706/02/1843311092.jpg" title="bbbbbb"/></a>
        <a id="thumb_2" href="3"><img src="http://www.haotuku.com/katong/sishen/066cn.jpg" title="cccccc"/></a>
        <a id="thumb_3" href="4"><img src="http://pic.yule13.com/big/ktdm/200706/02/1843566662.jpg" title="dddddd"/></a>
    </div>
</div>
http://www.98desk.com/d/0/5/84/2006110819532871609.jpg<br />
http://pic.yule13.com/big/ktdm/200706/02/1843311092.jpg<br />
http://www.haotuku.com/katong/sishen/066cn.jpg<br />
http://pic.yule13.com/big/ktdm/200706/02/1843566662.jpg<br />
</body>
</html>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
var focIdx=0,nextIdx=0,timer;
var thumbs=$("thumbList").getElementsByTagName("A");
function setFocus(pic){
 if(focIdx!=null)thumbs[focIdx].className="";
 pic.className="cur";
 focIdx=parseInt(pic.id.substring(pic.id.indexOf("_")+1,pic.id.length));
 var plink=$("picLink");
 plink.innerHTML=pic.getElementsByTagName("IMG")[0].title;
 plink.href=pic.href;
 var curPic=$("curPic");
 if(curPic.filters){
  curPic.filters[0].apply();
  curPic.filters[0].play();
 }
 curPic.src=pic.getElementsByTagName("IMG")[0].src;
 focIdx<3?nextIdx=focIdx+1:nextIdx=0;
 timer=setTimeout("setFocus(thumbs[nextIdx])",2000);
}
window.onload=function(){
 for(var i=0;i<thumbs.length;i++){
  thumbs[i].onmouseover=function(){
   if(timer){clearTimeout(timer)};
   setFocus(this);
  }
 }
 setFocus(thumbs[0]);
}
</script>

Js_图片轮换的更多相关文章

  1. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  2. JavaScript之图片轮换

    <!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...

  3. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  5. jquery 图片轮换

    jquery 图片轮换 1.下载jquery.superslide.2.1.1.js (百度搜索) 2.下载Jquery-1.4.1.js(百度搜索下载) 准备工作好了,下面开始实现 3.html & ...

  6. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. JS 阶段练习~ 仿flash的图片轮换效果

    结合了所学的简单运动框架~  做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName  IE低版的兼容性 2.DOM不够严谨 … 各种 ...

  8. JQuery图片轮换 nivoSlider图片轮换

    效果图: 第一步:添加引用 <script src="jquery-ui-1.9.2.custom.min.js" type="text/javascript&qu ...

  9. div+css+javascript 走马灯图片轮换显示

    效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

随机推荐

  1. SQLSERVER 分区表实战

    背景:对NEWISS数据库创建分区表T_SALES的SQL.按照日期来进行分区步骤:1:创建文件组2:创建数据文件3:创建分区函数4:创建分区方案5:创建表及聚集索引6:导入测试数据(此处略),并查询 ...

  2. js拼接table查询信息部分

    其一: $("#datagrid").empty(); var a=0; <order-rows> a++; $("#datagrid").appe ...

  3. Flink 的广播变量

    Flink 支持广播变量,就是将数据广播到具体的 taskmanager 上,数据存储在内存中,这样可以减缓大量的 shuffle 操作: 比如在数据 join 阶段,不可避免的就是大量的 shuff ...

  4. 1083. [SCOI2005]繁忙的都市【最小生成树】

    Description 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道 路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路 ...

  5. 将"a"标签当bunton使用

    <a href="javascript:void(0);" style="color: red" onclick="del_product_in ...

  6. MD5+DES在C#.NET与Java/Android中的加解密使用

    一.背景后台(C#.NET)使用一个MD5+DES的加解密算法,查了下,很多网友都使用了这个算法.在Android里,也需要这个算法,如何把这个加解密算法切换成Java版,成了难题.毕竟好久没涉及到这 ...

  7. apache不能启动LoadModule php5_module modules/ph

    apache不能启动LoadModule php5_module modules/php5apache2.dll的问题 主要是版本问题!!有点不爽!! apache不能启动 加入下面两行,apache ...

  8. Failed to abandon session scope: Connection timed out

    系统log 出现  Failed to abandon session scope: Connection timed out  错误, reboot无法重启 解决办法就是让postfix只用IPv4 ...

  9. Locust环境搭建及应用-hc课堂笔记

    Locust环境搭建: 1,在命令窗口中,进入到python项目路径,如:d:\Pycharmproject\venv\Scripts 2,执行Scripts下的active.bat,进入到虚拟环境 ...

  10. WorldWind源码剖析系列：挂件类Widgets

    WorldWindow用户定制控件类中所包含的的挂件类Widgets控件主要有如下图所示的派生类.它们的类图如下所示. 鉴于挂件类Widgets及其派生类,相对简单,基本上都是些利用DirectX3D ...