本文介绍用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. python自学——文件处理（截取文件内容）

    #截断文件内容使用的函数为truncate()来截断文件中的内容# 注意当truncate()括号内没有定义对象时则会删除文件内容:当括号内为指定某个条件时文件会截取从0到指定位置的内容f=open( ...

  2. MD5密码加密

    using System; using System.Security.Cryptography; using System.Text; namespace DimoNetwork.Common.DE ...

  3. mySQL 约束 (Constraints)：一、非空约束 NOT NULL 约束

    非空约束 NOT NULL 约束: 强制列不能为 NULL 值,约束强制字段始终包含值.这意味着,如果不向字段添加值,就无法插入新记录或者更新记录. 1.在 "Persons" 表 ...

  4. Android之间传递数据包

    在Android中 ,我们知道,两个activity之间通讯要用到Intent类,传递简单数据的方式我们也已经知道了.那么,如何在两个activity之间传递数据包呢,这就要用到我们的Bundle类了 ...

  5. Nginx+uWSGI+Django部署web服务器

    目录 Nginx+uWSGI+Django部署web服务器 环境说明 前言 搭建项目 Django部署 编辑luffy/luffy/settings.py 编辑luffy/app01/views.py ...

  6. [技术] OIer的C++标准库 : 字符串库

    引入 上次我在博客里介绍了OI中可能用到的STL中的功能, 今天我们接着来发掘C++标准库中能为OI所用的部分. 点击传送至我的上一篇系列博文 众所周知, OI中经常用到字符串相关的处理, 这时善用字 ...

  7. 使用Socket开发http服务器时碰到的问题及处理方法

    1. 前言 ​ 最近正在为QA测试开发压力测试框架,要为测试人员提供一个结果的图形化表示界面.为了展示数据的及时性,不得不使用lua语言实现一个http服务器.由于http服务需要提供的服务比较简单 ...

  8. PyQt5--QFontDiaglog

    # -*- coding:utf-8 -*- ''' Created on Sep 17, 2018 @author: SaShuangYiBing Comment: ''' import sys f ...

  9. POJ 2049— Finding Nemo（三维BFS）10/200

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013497151/article/details/29562915 海底总动员.... 这个题開始 ...

  10. redis性能测试工具的使用

    在redis安装完成后会生成一个bin的目录,在这个目录中有一个 redis-benchmark 的文件脚本工具,通过执行这个工具进行redis的性能测试. bash #执行这个脚本后脚本会自动运行r ...