本文介绍用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. jetty和tomcat比较

    两点,性能极佳,配置简单方便. 主要是设计思想的不同.Tomcat 主要是作为 JSP/Servlet 最新规范的参考实现而设计,属于学院派,但是显得庞大而杂乱.Tomcat 的性能很差,一般是作为 ...

  2. python-ldap修改AD域用户密码（CA+SSL）

    代码连接:https://github.com/raykuan/ldap-notes 使用python的ldap模块连接AD服务器,有两种方式: 非加密:con = ldap.initialize(' ...

  3. Django商城项目笔记No.6用户部分-注册接口-短信验证码实现celery异步

    Django商城项目笔记No.4用户部分-注册接口-短信验证码实现celery异步 接上一篇,如何解决前后端请求跨域问题? 首先想一下,为什么图片验证码请求的也是后端的api.meiduo.site: ...

  4. BZOJ4735:你的生命已如风中残烛(组合数学)

    Description 众所周知,萌萌哒六花不擅长数学,所以勇太给了她一些数学问题做练习.但是今天六花酱不想做数学题,于是他们开始打牌. 现在他们手上有m张不同的牌,牌有两种:普通牌和功能牌.功能牌一 ...

  5. 转，敏感词过滤，PHP实现的Trie树

    原文地址:http://blog.11034.org/2012-07/trie_in_php.html 项目需求,要做敏感词过滤,对于敏感词本身就是一个CRUD的模块很简单,比较麻烦的就是对各种输入的 ...

  6. 【转】 android获取设备唯一标识完美解决方案

    <p style="margin: 10px auto; padding-top: 0px; padding-bottom: 0px; color: rgb(51, 51, 51);  ...

  7. 【Odoo 8开发教程】第一章：Odoo 8.0安装

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/10779733.html odoo有三种常见的安装方式:打包程序安装.源码安装以及Docker镜像安装. 一:打 ...

  8. windows下一根数据线玩转树莓派zero(w)

    买了个树莓派zero w,想着用一根普通micro数据线达成 供电+ssh+通过usb共享网络+远程桌面 的目标 通过用静态ip免去了用benjour的连接不稳定方法,下面开始细说 需要的硬件: 树莓 ...

  9. shiro实战系列(十)之Subject

    毫无疑问,在 Apache Shiro 中最重要的概念就是 Subject.'Subject'仅仅是一个安全术语,是指应用程序用户的特定 安全的“视图”.一个 Shiro Subject 实例代表了一 ...

  10. mysql row日志格式下 查看binlog sql语句

    有时候我们需要使用row作为binlog的日志格式,即配置文件使用了binlog_format= row 参数 这样以来,我们在查看数据库binlog内容时候,就看不到增删改查的具体语句了,在数据库恢 ...