<!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=gb2312" />
<title>四屏带缩略图的焦点图代码</title>
<style type="text/css">
img {border:0px}
.fpic{
width:326px;
height:334px;
POSITION: relative;
}
#focpic{
width:322px;
height:240px;
border:#ECC1A1 1px solid;
position: absolute;
FILTER: RevealTrans(duration = 1,transition=12);
left: 1px;
top: 1px;
}
.fpic div{
Z-INDEX: 20;
CURSOR:pointer;
padding-top:4px;
POSITION: absolute;
TOP: 242px;
WIDTH: 78px;
HEIGHT: 58px;
}
.fpic img{
width:78px;
height:58px;
}
.fpic a:link img,.fpic a:visited img{
padding:1px;
border:#FFFFFF 1px solid;
}
.fpic a:hover img,.fpic a:active img{
padding:1px;
border:#4A8109 1px solid;
}
#tmb0 {LEFT: 0px;}
#tmb1 {LEFT: 82px;}
#tmb2 {LEFT: 164px;}
#tmb3 {LEFT: 246px;}
#fttltxt {
color: #3399CC;
left:0;
Z-INDEX: 21;
CURSOR:pointer;
text-align:center;
padding-top:70px;
POSITION: absolute;
TOP: 242px;
WIDTH: 322px;
HEIGHT: 30px;}
#fttltxt a:link, a:visited { color: #3399CC; text-decoration: none; font-weight: normal; }
#fttltxt a:active, a:hover { color: #073475; text-decoration: underline; }
</style>
<script language="javascript" type="text/javascript" >
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("focpic").src = picarry[id];
document.getElementById("foclnk").href = lnkarry[id];
document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
currslid = id;
for(i=0;i<4;i++){
document.getElementById("tmb"+i).className = "thubpic";
};
document.getElementById("tmb"+id).className ="thubpiccur";
focpic.style.visibility = "hidden";
focpic.filters[0].Apply();
if (focpic.style.visibility == "visible") {
focpic.style.visibility = "hidden";
focpic.filters.revealTrans.transition=12;
}
else {
focpic.style.visibility = "visible";
focpic.filters[0].transition=12;
}
focpic.filters[0].Play();
stopit();
}function playnext(){
if(currslid==3){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}
</script>
</head><body>
<DIV align="center" >
<DIV class="fpic"><A id="foclnk"
href="#"><IMG id="focpic" src="images/l01.jpg"></A>
<DIV class="thubpiccur" id="tmb0" onmouseover="setfoc(0)"; onmouseout="playit()";><A href="#"><IMG alt="" src="images/l01.jpg"></A></DIV>
<DIV class="thubpic" id="tmb1" onmouseover="setfoc(1)"; onmouseout="playit()";><A href="#"><IMG src="images/l02.jpg"></A></DIV>
<DIV class="thubpic" id="tmb2" onmouseover="setfoc(2)"; onmouseout="playit()";><A href="#"><IMG src="images/l03.jpg"></A></DIV>
<DIV class="thubpic" id="tmb3" onmouseover="setfoc(3)"; onmouseout="playit()";><A href="#"><IMG src="images/l04.jpg"></A></DIV><div id="fttltxt">标题1</div></DIV>
<p>
<SCRIPT language="javascript" type="text/javascript">
<!--
var picarry = {};var lnkarry = {};var ttlarry = {};
picarry[0] = "images/l01.jpg";lnkarry[0] = "#";ttlarry[0] = "标题1";picarry[1] = "images/l02.jpg";lnkarry[1] = "#";ttlarry[1] = "标题2";picarry[2] = "images/l03.jpg";lnkarry[2] = "#";ttlarry[2] = "标题3";picarry[3] = "images/l04.jpg";lnkarry[3] = "#";ttlarry[3] = "标题4";
//-->
</SCRIPT>
</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>四屏带缩略图的焦点图代码</title>
<style type="text/css">
img {border:0px}
.fpic{
width:326px;
height:334px;
POSITION: relative;
}
#focpic{
width:322px;
height:240px;
border:#ECC1A1 1px solid;
position: absolute;
FILTER: RevealTrans(duration = 1,transition=12);
left: 1px;
top: 1px;
}
.fpic div{
Z-INDEX: 20;
CURSOR:pointer;
padding-top:4px;
POSITION: absolute;
TOP: 242px;
WIDTH: 78px;
HEIGHT: 58px;
}
.fpic img{
width:78px;
height:58px;
}
.fpic a:link img,.fpic a:visited img{
padding:1px;
border:#FFFFFF 1px solid;
}
.fpic a:hover img,.fpic a:active img{
padding:1px;
border:#4A8109 1px solid;
}
#tmb0 {LEFT: 0px;}
#tmb1 {LEFT: 82px;}
#tmb2 {LEFT: 164px;}
#tmb3 {LEFT: 246px;}
#fttltxt {
color: #3399CC;
left:0;
Z-INDEX: 21;
CURSOR:pointer;
text-align:center;
padding-top:70px;
POSITION: absolute;
TOP: 242px;
WIDTH: 322px;
HEIGHT: 30px;}
#fttltxt a:link, a:visited { color: #3399CC; text-decoration: none; font-weight: normal; }
#fttltxt a:active, a:hover { color: #073475; text-decoration: underline; }
</style>
<script language="javascript" type="text/javascript" >
var currslid = 0;
var slidint;
function setfoc(id){
document.getElementById("focpic").src = picarry[id];
document.getElementById("foclnk").href = lnkarry[id];
document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
currslid = id;
for(i=0;i<4;i++){
document.getElementById("tmb"+i).className = "thubpic";
};
document.getElementById("tmb"+id).className ="thubpiccur";
focpic.style.visibility = "hidden";
focpic.filters[0].Apply();
if (focpic.style.visibility == "visible") {
focpic.style.visibility = "hidden";
focpic.filters.revealTrans.transition=12;
}
else {
focpic.style.visibility = "visible";
focpic.filters[0].transition=12;
}
focpic.filters[0].Play();
stopit();
}function playnext(){
if(currslid==3){
currslid = 0;
}
else{
currslid++;
};
setfoc(currslid);
playit();
}
function playit(){
slidint = setTimeout(playnext,4500);
}
function stopit(){
clearTimeout(slidint);
}
window.onload = function(){
playit();
}
</script>
</head><body>
<DIV align="center" >
<DIV class="fpic"><A id="foclnk"
href="#"><IMG id="focpic" src="images/l01.jpg"></A>
<DIV class="thubpiccur" id="tmb0" onmouseover="setfoc(0)"; onmouseout="playit()";><A href="#"><IMG alt="" src="images/l01.jpg"></A></DIV>
<DIV class="thubpic" id="tmb1" onmouseover="setfoc(1)"; onmouseout="playit()";><A href="#"><IMG src="images/l02.jpg"></A></DIV>
<DIV class="thubpic" id="tmb2" onmouseover="setfoc(2)"; onmouseout="playit()";><A href="#"><IMG src="images/l03.jpg"></A></DIV>
<DIV class="thubpic" id="tmb3" onmouseover="setfoc(3)"; onmouseout="playit()";><A href="#"><IMG src="images/l04.jpg"></A></DIV><div id="fttltxt">标题1</div></DIV>
<p>
<SCRIPT language="javascript" type="text/javascript">
<!--
var picarry = {};var lnkarry = {};var ttlarry = {};
picarry[0] = "images/l01.jpg";lnkarry[0] = "#";ttlarry[0] = "标题1";picarry[1] = "images/l02.jpg";lnkarry[1] = "#";ttlarry[1] = "标题2";picarry[2] = "images/l03.jpg";lnkarry[2] = "#";ttlarry[2] = "标题3";picarry[3] = "images/l04.jpg";lnkarry[3] = "#";ttlarry[3] = "标题4";
//-->
</SCRIPT>
</p>
</div>
</body>
</html>
这是典型的IE写法,W3C标准请用DOCUMENT.GETELEMENTBYID(“”)
另外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=gb2312" />
<title>无标题文档</title>
<script language="javascript">
var num=1;
function loop(){
for (var i=1; i<=3;i++) {
if (i==num) {
document.getElementById("pic"+i).style.display="block";
document.getElementById("m"+i).className="active";
}else {
document.getElementById("pic"+i).style.display="none";
document.getElementById("m"+i).className="";
}
}
num++;
if (num>3) {
num=1;
}setTimeout("loop()",1000);
}function show(id,n,menu,box) {
for (var i=1;i<n;i++) {
if(i==id) {
document.getElementById(menu+i).className="active";
document.getElementById(box+i).style.display="block";
}else {
document.getElementById(menu+i).className="";
document.getElementById(box+i).style.display="none";
}
}
}</script></head>
<style type="text/css">
.active { font-weight:bold; color:#f00;}
</style>
<body onload="loop();"><div id="pic1">1</div>
<div id="pic2" style="display:none;">2</div>
<div id="pic3" style="display:none;">3</div>
<ul>
<li id="m1" onclick="show('1','4','m','pic')">1</li>
<li id="m2" onclick="show('2','4','m','pic')">2</li>
<li id="m3" onclick="show('3','4','m','pic')">3</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Slider </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body, td, ul, li { margin:0; padding:0 }
table { border-collapse: collapse; border-spacing:0 }
#container { width:610px; height:205px; position:relative; overflow: hidden; margin:0 auto; }
#scroller { position:absolute; }
#page { position: absolute; float:right; left:520px; top:180px;}
#page li { float:left; cursor:pointer; list-style:none; width:15px; height:15px; line-height:15px; font-family:Arial; font-size:12px; margin:1px; text-align:center;background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll -15px 0 transparent;}
#page li.on {background:url("http://pc.qq.com/pc/images/flashbutton.gif") no-repeat scroll 0 0 transparent;color:#FFFFFF;}
img{ border:0;}
</style>
</head>
<body>
<div id="container">
<table id="scroller" >
<tr>
<td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/manage.jpg" border="0" /></a></td>
<td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/py.jpg" /></a></td>
<td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/player.jpg" /></a></td>
<td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/xf.jpg" /></a></td>
<td><a href="http://www.websjy.com"><img src="http://inncache.soso.com/pc/images/TT.jpg" /></a></td>
</tr>
</table>
<ul id="page"></ul>
</div>
<script>
var QQ = function() {
// 公用函数
function T$(id) { return document.getElementById(id); }
function T$$(root, tag) { return (root || document).getElementsByTagName(tag); }
function $extend(des, src) { for(var p in src) { des[p] = src[p]; } return des; }
function $each(arr, callback, thisp) {
if (arr.forEach) {arr.forEach(callback, thisp);}
else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr);}
}
function currentStyle(elem, style) {
return elem.currentStyle || document.defaultView.getComputedStyle(elem, null);
}
// 缓动类
var Tween = {
Quart: {
easeOut: function(t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
},
Back: {
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
},
Bounce: {
easeOut: function(t,b,c,d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
}
}
// 主类构造函数
var scrollTrans = function(cid, sid, count, config) {
var self = this;
if (!(self instanceof scrollTrans)) {
return new scrollTrans(cid, sid, count, config);
}
self.container = T$(cid);
self.scroller = T$(sid);
if (!(self.container || self.scroller)) {
return;
}
self.config = $extend(defaultConfig, config || {});
self.index = 0;
self.timer = null;
self.count = count;
self.step = self.scroller.offsetWidth / count;
};
// 默认配置
var defaultConfig = {
trigger: 1, // 触发方式1:click other: mouseover
auto: true, // 是否自动切换
tween: Tween.Quart.easeOut, // 默认缓动类
Time: 10, // 滑动延时
duration: 50, // 切换时间
pause: 3000, // 停顿时间
start: function() {}, // 切换开始执行函数
end: function() {} // 切换结束执行函数
};
scrollTrans.prototype = {
constructor: scrollTrans,
transform: function(index) {
var self = this;
index == undefined && (index = self.index);
index < 0 && (index = self.count - 1) || index >= self.count && (index = 0);
self.time = 0;
self.target = -Math.abs(self.step) * (self.index = index);
self.begin = parseInt(currentStyle(self.scroller)['left']);
self.change = self.target - self.begin;
self.duration = self.config.duration;
self.start();
self.run();
},
run: function() {
var self = this;
clearTimeout(self.timer);
if (self.change && self.time < self.duration) {
self.moveTo(Math.round(self.config.tween(self.time++, self.begin, self.change, self.duration)));
self.timer = setTimeout(function() {self.run()}, self.config.Time);
} else {
self.moveTo(self.target);
self.config.auto && (self.timer = setTimeout(function() {self.next()}, self.config.pause));
}
},
moveTo: function(i) {
this.scroller.style.left = i + 'px';
},
next: function() {
this.transform(++this.index);
}
};
return {
scroll: function(cid, sid, count, config) {
window.onload = function() {
var frag = document.createDocumentFragment(),
nums = [];
for (var i = 0; i < count; i++) {
var li = document.createElement('li');
(nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i + 1;
}
T$('page').appendChild(frag);
// 调用主类
var st = scrollTrans(cid, sid, count, config);
$each(nums, function(o, i) {
o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); }
o.onmouseout = function() { o.className = ''; st.transform();}
});
st.start = function() {
$each(nums, function(o, i) {
o.className = st.index == i ? 'on' : '';
});
};
st.transform();
}
}
}
}();
QQ.scroll('container' /*外部容器ID*/, 'scroller'/*滑动容器ID*/, 5/*切换图片数目*/, {trigger: 0} /*默认配置*/);
</script>
</body>
</html>