Js_图片轮换
本文介绍用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_图片轮换的更多相关文章
- Jquery实现图片轮换效果
最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...
- JavaScript之图片轮换
<!doctype html> <title>javascript图片轮换</title> <meta charset="utf-8"/& ...
- 使用纯生js实现图片轮换
效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 仿FLASH的图片轮换效果
css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...
- jquery 图片轮换
jquery 图片轮换 1.下载jquery.superslide.2.1.1.js (百度搜索) 2.下载Jquery-1.4.1.js(百度搜索下载) 准备工作好了,下面开始实现 3.html & ...
- jQuery仿迅雷图片轮换效果
jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- JS 阶段练习~ 仿flash的图片轮换效果
结合了所学的简单运动框架~ 做这样一个综合小实例~~ -------------------------主要问题: 1.getByClassName IE低版的兼容性 2.DOM不够严谨 … 各种 ...
- JQuery图片轮换 nivoSlider图片轮换
效果图: 第一步:添加引用 <script src="jquery-ui-1.9.2.custom.min.js" type="text/javascript&qu ...
- div+css+javascript 走马灯图片轮换显示
效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- C# socket 发送图片和文件
先说服务端:界面:如图: 界面设计源码 namespace SocketJPGToTxt { partial class Form1 { /// <summary> /// 必需的设计器变 ...
- 《SQL Server 2008从入门到精通》--20180724
目录 1.事务 1.1.事务的ACID属性 1.2.事务分类 1.2.1.系统提供的事务 1.2.2.用户自定义的事务 1.3.管理事务 1.3.1.SAVE TRANSACTION 1.3.2.@@ ...
- JavaBeansDataExchange could not instantiate result class
当ibatis初始化Bean的时候,会调用无参的构造函数,所以如果Bean中有带参的构造函数,一定得多写个无参的构造函数, 否则ibatis会因找不到构造函数而出错,抛出异常如下:JavaBeansD ...
- npm安装vue
目录 npm安装vue Vue.js 是什么 直接用script引入 安装vue 对不同构建版本的解释 安装命令行工具 (CLI) 安装cnpm 安装vue-cli 新建vue项目 运行服务 目录结构 ...
- MySQL一个延迟案例
突然接到报警显示MySQL主从之间延迟过大,随后尽快到集群上面看看,进行排查. 首先我们查看延迟是由什么造成的,排查一遍过后发现不是网卡和从库机器的负载,那就要从其他地方来排除了 查看binlog日志 ...
- 4星|《门口的野蛮人2》：美国宝万之争专业户KKR公司的疯狂借债收购史
门口的野蛮人2:KKR与资本暴利的崛起(珍藏版) 英文版是1992年出的.主要内容是1977-1998年之间KKR在美国的杠杆收购简史.从KKR创立开始,讲到1990年KKR差点倒闭.国内A股市场上前 ...
- October 18th 2017 Week 42nd Wednesday
Only someone who is well-prepared has the opportunity to improvise. 只有准备充分的人才能够尽兴表演. From the first ...
- 利用Chrome浏览器的开发者工具截取整个页面
①打开Chrome浏览器的开发者工具: 快捷键: command + Alt + I (Mac). Ctrl + shift + I (Windows) 或者: 鼠标右键 -> 弹出菜单中选择 ...
- VS2017C++单元测试
0.欢迎食用 希望对点进来的你有所帮助. 全文记流水账,内心想法如示例项目名称. 1.建立需测试的项目 新建项目 正常书写.h 和.cpp文件 2.新建单元测试 右击解决方案 -> 添加 -&g ...
- 【Python】os.path.isfile()的使用方法汇总
方法一: # -*- coding:utf-8 -*- import os import sys from uiautomator import device as d filepath = r'E: ...