本文介绍用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. SSH批量分发管理

    ssh服务认证类型主要有两个: 基于口令的安全验证: 基于口令的安全验证的方式就是大家一直在用的,只要知道服务器的ssh连接账户.口令.IP及开发的端口,默认22,就可以通过ssh客户端登陆到这台远程 ...

  2. [Spark RDD_add_1] groupByKey & reduceBykey 的区别

    [groupByKey & reduceBykey 的区别] 在都能实现相同功能的情况下优先使用 reduceBykey Combine 是为了减少网络负载 1. groupByKey 是没有 ...

  3. .NET Core 使用 EF 出错的解决方法

    在.NET Core 项目钟(类库),使用Entity Framework,建立模型生成数据库时,失败 Could not load assembly 'xxx'. Ensure it is refe ...

  4. DOS 总结

    shutdown -s -t 30 指定在30秒之后自动关闭计算机. + L 返回登录页面 netstat 最近访问IP Regedit 打开注册表

  5. 自己模拟写C++中的String类型

    下面是模拟实现字符串的相关功能,它包括一下功能:    String(const char * s);//利用字符串来初始化对象    String(); //默认构造函数    String(con ...

  6. plsqldev、oracle插入中文乱码问题解决

    最近在开发项目时用到Oracle数据库,需要手动插入一些数据,但插入中文的sql值时出现了乱码. 中文乱码就是编码不统一所导致的了,解决办法只需要把编码统一下即可解决了. 此种情况最大的可能就是客户端 ...

  7. Xmind在win10更改用户设置后出现Invalid Configuration Location 错误的解决办法

    错误原因: 因为一开始新建win10用户时,使用的是中文用户名,导致了部分软件比如IDEA读取C盘中配置文件时报错.我用管理员权限修改用户姓名为英文后,IDEA的问题虽然已经解决,但Xmind却报出了 ...

  8. swift的关联类型

    一.术语:指定类型 typealias:用于给关联类型指定类型: 通过类型推断给关联类型指定类型太过烧脑: 二.类型指定 1.具体类型实现协议后,直接指定:作为普通的泛型类型使用,指定类型即可: 2. ...

  9. 关于Netty Pipeline中Handler的执行顺序问题

    原文地址:http://blog.csdn.net/wgyvip/article/details/25637651 最近在学习Netty框架,根据官网的教程学着做了几个小测试,都成功了,后面开始试着写 ...

  10. docker镜像的创建方法docker file方式

    什么是docker file文件? 简单来说,docker file文件就是一个命令文本集合,容来记录创建docker镜像的步骤 快速入门: 1.新建一个docker file文件dockerfile ...