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 ...
随机推荐
- web.config中的InProc模式 与 StateServer模式[转]
开发asp.net应用时,修改web.config中的SessionState节点. <sessionState mode="StateServer" stateConnec ...
- [Spark Streaming_1] Spark Streaming 概述
0. 说明 Spark Streaming 介绍 && 在 IDEA 中编写 Spark Streaming 程序 1. Spark Streaming 介绍 Spark Stream ...
- windows Server 2008R2 FTP服务器搭建详细图解
一.安装ftp服务 1.打开服务器管理器,如图: 2.右键点击角色,如图: 3.点击添加角色,会出现添加角色向导对话框,如图: 4.点击下一步,选择要添加的“web服务器(IIS)” ‘’ 5.点击下 ...
- Android常见UI组件之ListView(一)
使用ListView显示一个长的项列表 1.新建一个名为"BasicView5"的Android项目. 2.改动BasicView5.java文件.改动后的程序例如以下: pack ...
- 关于Maven配置的一些标签含义(后续逐渐补充)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 20145236《网络对抗》进阶实验——Return-to-libc攻击
20145236<网络对抗>进阶实验--Return-to-libc攻击 基础知识 Return-into-libc攻击方式不具有同时写和执行的行为模式,因为其不需要注入新的恶意代码,取而 ...
- Arduino入门笔记(8):利用12864和ADXL345学习重力感应控制
转载请注明:@小五义 http://www.cnblogs.com/xiaowuyi 欢迎加入讨论群 64770604 一.本次实验所需器材 1.Arduino UNO板 https://item.t ...
- poj 1364 King(线性差分约束+超级源点+spfa判负环)
King Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14791 Accepted: 5226 Description ...
- MVC 在action方法中获取当前action的控制器名和action名
如何在某个action方法中获取它所在的控制器和action名称呢. string controllerName = Request.RequestContext.RouteData.Values[& ...
- Advanced Javascript outlining插件说明
Advanced Javascript outlining插件 用途:在js文件中写入#region/#endregion代码组合段,可收缩和展开.类似于后台页面的region用法. 效果截图如下(前 ...