一个很好的图片切换js
2010-06-04 10:53
351 查看
//slideimages数组为变换的图
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图01";
slidetext[1]="焦点图02";
slidetext[2]="焦点图03";
slidetext[3]="焦点图04";
slidetext[4]="焦点图05";
//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="http://www.sharejs.com";
slidelinks[1]="http://www.sharejs.com";
slidelinks[2]="http://www.sharejs.com";
slidelinks[3]="http://www.sharejs.com";
slidelinks[4]="http://www.sharejs.com";
//焦点图初始内容－－start
var slidespeed=3000
var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");
var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function tu_ove(){clearTimeout(setID)}
function ou(){slideit()}
var whichlink=0
var whichimage=0
function gotoshow(){
window.open(slidelinks[whichlink]);
}
function slideit(){
document.images.slide.style.filter=filterArray[whichimage];
//alert(document.images.slide.style.filter);
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0
//alert(pixeldelay);
if (!document.images) return
if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}
前台页面：
<!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>4图轮换的热门焦点图代码（纯JavaScript版） - 分享JavaScript-sharejs.com</title>
</head>
<body>
<table width=325 border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td colspan=3><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="images/ad-01.jpg" width=325 height=190 name="slide" border=0></a></td>
</tr>
<tr>
<td width=229 height="19" align=center bgcolor=#f4f4f4 class="white"><div id=textslide>焦点图标题层</div></td>
<td width=1 bgcolor=#7C7C7C><div style="position:relative">
<div style="position:absolute;top:10px">
<table width=95 border=0 cellpadding=0 cellspacing=0>
<tr valign=top align=center>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu1 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan1 width=10 height=3 border=0></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu2 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan2 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu3 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan3 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu4 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan4 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative; left: 1px;">
<div id=xiaotu5 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan5 width=10 height=3></div>
</div></td>
</tr>
</table>
</div>
</div></td>
<td width=95 height="19"><table width=95 border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(0)" onMouseOut="ou()"><img src="images/1.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(1)" onMouseOut="ou()"><img src="images/2.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(2)" onMouseOut="ou()"><img src="images/3.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(3)" onMouseOut="ou()"><img src="images/4.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19"><a style="cursor:hand" onMouseOver="ove(4)" onMouseOut="ou()"><img src="images/5.gif" width="19" height="19" border=0></a></td>
</tr>
</table></td>
</tr>
</table>
<script language=JavaScript src="js/5adpics.js"></script><br><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<br><br>
<div align="center">
<script language="javascript" src="http://www.sharejs.com/js/720.js%22%3E%3C/script>
<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com%22%3ehttp//www.sharejs.com%3C/a>
</div>
</body>
</html>
附件
var slideimages=new Array();
slideimages[0]="images/ad-01.jpg";
slideimages[1]="images/ad-02.jpg";
slideimages[2]="images/ad-03.jpg";
slideimages[3]="images/ad-04.jpg";
slideimages[4]="images/ad-05.jpg";
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图01";
slidetext[1]="焦点图02";
slidetext[2]="焦点图03";
slidetext[3]="焦点图04";
slidetext[4]="焦点图05";
//slidetext数组为点击大图后跳到的地址
var slidelinks=new Array();
slidelinks[0]="http://www.sharejs.com";
slidelinks[1]="http://www.sharejs.com";
slidelinks[2]="http://www.sharejs.com";
slidelinks[3]="http://www.sharejs.com";
slidelinks[4]="http://www.sharejs.com";
//焦点图初始内容－－start
var slidespeed=3000
var slidesanjiaoimages=new Array("images/bian2.gif","images/bian1.gif");
var slidesanjiaoimagesname=new Array("xiaosan1","xiaosan2","xiaosan3","xiaosan4","xiaosan5");
var filterArray=new Array();
filterArray[0]="progid:DXImageTransform.Microsoft.Pixelate (enabled=false,duration=2,maxSquare=25 )";
filterArray[1]="progid:DXImageTransform.Microsoft.Stretch (duration=1,stretchStyle=PUSH)";
filterArray[2]="progid:DXImageTransform.Microsoft.Stretch(duration=1)";
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)";
filterArray[4]="progid:DXImageTransform.Microsoft.Fade ( duration=1,overlap=0.25 )";
var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function tu_ove(){clearTimeout(setID)}
function ou(){slideit()}
var whichlink=0
var whichimage=0
function gotoshow(){
window.open(slidelinks[whichlink]);
}
function slideit(){
document.images.slide.style.filter=filterArray[whichimage];
//alert(document.images.slide.style.filter);
pixeldelay=(ie55)? (document.images.slide.filters[0].duration*1000) : 0
//alert(pixeldelay);
if (!document.images) return
if (ie55) {
document.images.slide.filters[0].apply();
document.images.slide.filters[0].play();
}
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setID=setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
function ove(n){
clearTimeout(setID)
whichimage=n;
document.images.slide.src=imageholder[whichimage].src
document.getElementById("textslide").innerText=slidetext[whichimage];
document.getElementById("xiaosan1").src=slidesanjiaoimages[0];
document.getElementById("xiaosan2").src=slidesanjiaoimages[0];
document.getElementById("xiaosan3").src=slidesanjiaoimages[0];
document.getElementById("xiaosan4").src=slidesanjiaoimages[0];
document.getElementById("xiaosan5").src=slidesanjiaoimages[0];
document.getElementById(slidesanjiaoimagesname[whichimage]).src=slidesanjiaoimages[1];
}
前台页面：
<!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>4图轮换的热门焦点图代码（纯JavaScript版） - 分享JavaScript-sharejs.com</title>
</head>
<body>
<table width=325 border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td colspan=3><a onClick="gotoshow()" onMouseOver="tu_ove()" onMouseOut="ou()" style="cursor:hand"><img src="images/ad-01.jpg" width=325 height=190 name="slide" border=0></a></td>
</tr>
<tr>
<td width=229 height="19" align=center bgcolor=#f4f4f4 class="white"><div id=textslide>焦点图标题层</div></td>
<td width=1 bgcolor=#7C7C7C><div style="position:relative">
<div style="position:absolute;top:10px">
<table width=95 border=0 cellpadding=0 cellspacing=0>
<tr valign=top align=center>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu1 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan1 width=10 height=3 border=0></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu2 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan2 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu3 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan3 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative">
<div id=xiaotu4 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan4 width=10 height=3></div>
</div></td>
<td width="19" height="0"><div style="position:relative; left: 1px;">
<div id=xiaotu5 style="position:absolute;top:-19px;left:0px"><img src=images/bian1.gif id=xiaosan5 width=10 height=3></div>
</div></td>
</tr>
</table>
</div>
</div></td>
<td width=95 height="19"><table width=95 border=0 cellpadding=0 cellspacing=0>
<tr valign=top>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(0)" onMouseOut="ou()"><img src="images/1.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(1)" onMouseOut="ou()"><img src="images/2.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(2)" onMouseOut="ou()"><img src="images/3.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19" class="homejdboder"><a style="cursor:hand" onMouseOver="ove(3)" onMouseOut="ou()"><img src="images/4.gif" width="19" height="19" border=0></a></td>
<td width="19" height="19"><a style="cursor:hand" onMouseOver="ove(4)" onMouseOut="ou()"><img src="images/5.gif" width="19" height="19" border=0></a></td>
</tr>
</table></td>
</tr>
</table>
<script language=JavaScript src="js/5adpics.js"></script><br><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<br><br>
<div align="center">
<script language="javascript" src="http://www.sharejs.com/js/720.js%22%3E%3C/script>
<br><br>
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com%22%3ehttp//www.sharejs.com%3C/a>
</div>
</body>
</html>
附件
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个漂亮的js轮换图，在ff下只能切换图片
- 一个简单且丑陋的js切换背景图片基础示例
- 用html+css+js实现的一个简单的图片切换特效
- 一个实现图片切换的js代码
- 个人收藏的一个比较好的JS的图片切换代码。
- JS动态切换图片(一个页面中可多次使用)
- 用js写一个图片渐变切换效果
- 用html+css+js实现的一个简单的图片切换特效
- 通过js写的一个比较简单的点击切换图片效果
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- 一个简单的图片切换特效
- JS图片切换动画版
- 一个图片切换效果
- 多张图片切换效果js代码
- 发布一个JS图片阅览组件
- Js+css实现的一款漂亮宽屏图片切换代码
- js实现多组图片切换
- 一个面向对象的JS例子，很好的支持了开闭原则(不要重复你昨天的代码）
- 图片切换特效(js)
- 【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作！利用触摸屏手势实现一个简单切换图片的功能！