<scriptlanguage=javascript>
varcurIndex=0;
//时间间隔单位毫秒
vartimeInterval=1000;
vararr=newArray();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
arr[4]="5.jpg";
arr[5]="6.jpg";
arr[6]="7.jpg";
setInterval(changeImg,timeInterval);
functionchangeImg()
{
varobj=document.getElementById("obj");
if(curIndex==arr.length-1)
{
curIndex=0;
}
else
{
curIndex+=1;
}
obj.src=arr[curIndex];
}
</script>
<imgid=objsrc="1.jpg"border=0/>
或者
<script language="JavaScript" defer>
<!--
var k=1;
var imgname1="pic/children";
var imgname2=".jpg";
var imgnub=6;
function start(){
obj=eval("img1");
// 这部分语句是用于改变切换样式,在23种样式中循环。
if (obj.filters.item(0).Transition==23)
obj.filters.item(0).Transition=1;
else
obj.filters.item(0).transition++;
obj.filters.item(0).Apply();
if (k<imgnub) {
k++;
}
else {k=1;
}
obj.src=imgname1+k+imgname2;
obj.filters.item(0).Play();
setTimeout("start(1)",3000); // 每三秒钟刷新一次。
}
start();
-->
</script>
<img id=img1 width=100 height=100 style="filter:revealTrans(Transition=1,Duration=1.5)">
或者///////////////////////////////////////////////////////////////////////////////////////////////////
<style>
#g_div{text-align:right;overflow:hidden}
.b{width:24px; height:16px; background:#737373; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.b:hover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
.bhover{width:24px; height:16px; background:#780001; font-size:14px; font-weight:bold; color:#fff; text-decoration:none;margin-left:1px}
</style>
<div id="g_div" style="width:270px;height:252px"><a
href="#" target=_blank><img
id="g_img" style="FILTER:revealTrans(duration=1,transition=23);width:266px;height:220px;border:1px green solid" src="http://zi.csdn.net/xian.gif">
</a><a
href="http://www.baidu.com/" for="http://zi.csdn.net/xian.gif" target="_blank">1.CSDN程序员</a><a
href="http://www.126.com/" for="http://zi.csdn.net/microsoft280_187.jpg" target="_blank">2.CSDN程序员</a><a
href="http://mp3.baidu.com/" for="http://zi.csdn.net/live.gif" target="_blank">3.CSDN程序员</a><a
href="http://post.baidu.com/" for="http://zi.csdn.net/new-mba.gif" target="_blank">4.CSDN程序员</a><a
href="http://top.baidu.com/" for="http://zi.csdn.net/book.jpg" target="_blank">5.CSDN程序员</a>
</div>
<script language="JavaScript">
function f(){
var g_sec=3 //几秒后切换图片
var g_items=new Array()
var g_div=document.getElementById("g_div")
var g_img=document.getElementById("g_img")
var g_imglink=g_img.parentElement
var arr=g_div.getElementsByTagName("A")
var arr_length=arr.length
var g_index=1
var show_img=function(n){
if (/\d+/.test(n)){
var prev=g_index+1
g_index=n-1
}else{
var prev=(g_index>arr.length)?(arr_length-1):g_index+1
g_index=(g_index<arr_length-2)?(++g_index):0
}
if (document.all){
g_img.filters.revealTrans.Transition=23;
g_img.filters.revealTrans.apply();
g_img.filters.revealTrans.play();
}
arr[prev].className="b"
arr[g_index+1].className="bhover"
g_img.src="/blog/g_items[g_index].img.src"
g_img.title=g_items[g_index].txt
g_imglink.href="/blog/g_items[g_index].url";
g_imglink.target=g_items[g_index].target
}
for(var i=1;i<arr_length;i++){
g_items.push({txt:arr[i].innerHTML,
url:arr[i].href,
target:arr[i].target,
img:(function(){var o=new Image;o.src="/blog/arr[i].getAttribute"("for");return o})()})
arr[i].title=arr[i].innerHTML
arr[i].innerHTML=[i," "].join("")
arr[i].className="b"
arr[i].onclick=function(){
event.returnValue=false;
show_img(event.srcElement.innerText)
}
}
show_img(1)
var t=window.setInterval(show_img,g_sec*1000)
g_img.onmouseover=function(){window.clearInterval(t)}
g_img.onmouseout=function(){t=window.setInterval(show_img,g_sec*1000)}
}
window.attachEvent("onload",f)
</script>
或者///////////////////////////////////////////////////////////////////////////////////////////////////
js常用语句及语法详细介绍
看到这种图片切换的效果吗?用来切换旗帜广告将是个很好的选择。下面我们来讲一讲具体的做法:
第一步、把下面这段代码插入到页面的<head>与</head>之间:
<script language=javascript>
isns = navigator.appName == "Netscape";
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}
zhuanti=new Array()
imgcount=1;
frequency=10*1000;//30秒
//在这里修改图片的路径和链接
zhuanti[1]=new ztstr('1','http://www.windstudio.net/banner/banner1.gif','http://www.windstudio.net')
zhuanti[2]=new ztstr('2','http://www.windstudio.net/banner/banner2.gif','http://www.windstudio.net')
zhuanti[3]=new ztstr('3','http://www.windstudio.net/banner/banner3.gif','http://www.windstudio.net')
zhuanti[4]=new ztstr('4','http://www.windstudio.net/banner/banner4.gif','http://www.windstudio.net')
imgcount=zhuanti.length-1
for(i=1;i<=imgcount;i++)
{
eval("img"+i+"=new Image()")
eval("img"+i+".src=zhuanti["+i+"].picurl")
}
nn=1
var rand1 = 0;
var useRand = 0;
function swapPic() {
var imgnum = zhuanti.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
// alert(useRand);
nn=useRand;
change_img();
}
function change_img()
{
eval('document.pic.src=img'+nn+'.src');
nn++;
if(nn>imgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}
function pictarget()
{
tt=nn-1
if(tt<1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl);
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}
function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth<=spacewidth&&dmheight<=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
</script>
第二步、调用定义好的JavaScript函数,在<body>里加上以下代码:
<body onload=swapPic()>
第三步、在页面中插入图片和链接:
<a href=javascript:void(null) onclick='javascript:pictarget();return false;'><img src="http://www.windstudio.net/banner/banner1.gif" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"></a>
好,到这里就大功告成了。另外,试试改变transition的数值,可以得到不同的转换效果哟~~
或者///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<SCRIPTlanguage=JavaScript>
<!--//BannerAD
varbannerAD=newArray();
varbannerADlink=newArray();
varadNum=0;
bannerAD[0]="indexbanner/1.jpg";
bannerADlink[0]="#";
bannerAD[1]="indexbanner/2.jpg";
bannerADlink[1]="#";
bannerAD[2]="indexbanner/3.jpg";
bannerADlink[2]="#";
bannerAD[3]="indexbanner/4.jpg";
bannerADlink[3]="#";
bannerAD[4]="indexbanner/5.jpg";
bannerADlink[4]="#";
bannerAD[5]="indexbanner/6.jpg";
bannerADlink[5]="#";
bannerAD[6]="indexbanner/7.jpg";
bannerADlink[6]="#";
bannerAD[7]="indexbanner/8.jpg";
bannerADlink[7]="#";
varpreloadedimages=newArray();
for(i=0;i<bannerAD.length;i++){
preloadedimages=newImage();
preloadedimages.src=bannerAD;
}
functionsetTransition(){
if(document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}
functionplayTransition(){
if(document.all)
bannerADrotator.filters.revealTrans.play()
}
functionnextAd(){
if(adNum<bannerAD.length-1)adNum++;
elseadNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()",3500);
}
functionjump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if(jumpUrl!=''){
if(jumpTarget!='')window.open(jumpUrl,jumpTarget);
elselocation.href=jumpUrl;
}
}
functiondisplayStatusMsg(){
status=bannerADlink[adNum];
document.returnValue=true;
}
//-->
</SCRIPT>
<Aonmouseover="displayStatusMsg();returndocument.returnValue"
href="javascript:jump2url()"><IMG
style="FILTER:revealTrans(duration=2,transition=23)"
src="TungstenCore.files/1.jpg"border=0name=bannerADrotator></A>
<SCRIPTlanguage=JavaScript>nextAd()</SCRIPT>