求能分别设置每张图片显示时间的图片轮显代码

allenxia 2008-03-23 12:54:15
如题,网上大多是统一时间的,谁能帮我找找,谢谢了~~
...全文
1345 点赞 收藏 9
写回复
9 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
Dogfish 2008-03-23
这个在IE6测试过


<script type="text/javascript">
var obj=document.getElementById;
var currentAd=0;
var adTimer;
var baseurl="";//广告图片的根目录
var maxinfo=18;//信息栏可显示的最长字数
var adDelay=3000;//广告切换时间
var controlItemId="controlitem";//根据自己的页面为跟踪条取ID前缀
var mapcolor="#003366";//Ad跟踪条颜色,建议与信息栏的a:hover一样
var imglink=new Array();
imglink[0]=new Array("http://cimg2.163.com/catchpic/6/63/6388CA6FF0494230431E385DAADC0AEC.jpg","你的链接1","Pic1","图片注释1",1000) //自定义时间在这。
imglink[1]=new Array("http://www.csdn.net/Images/logo_csdn.gif","你的链接2","花树","图片注释2",2000)
imglink[2]=new Array("http://www.tom.com/images/logo.gif","你的链接3","单眼皮狼","图片注释3",3000)
imglink[3]=new Array("http://sports.tom.com/uldf/2008/0323/liangzhuochao/12051135687-3.jpg","你的链接4","小咪","图片注释4",4000)
imglink[4]=new Array("http://ent.tom.com/uldf/2008/0323/tanweiwei/10280.jpg","你的链接5","乎乎","图片注释5",5000)
imglink[5]=new Array("http://lady.tom.com/uldf/2008/0323/panwei/109240.jpg","你的链接6","乎乎","图片注释6",6000)
for(i=0;i<imglink.length;i++)
{
if(imglink[2].length<maxinfo)
imglink[3]=imglink[2];
else
imglink[3]=imglink[2].substring(0,maxinfo-3)+"...";
}
</script>


<body>
<div id="adBox">
<div class="imgBox">
<img src="http://cimg2.163.com/catchpic/C/C1/C1BADB7FE919ACE341C246B69C130B16.jpg" alt="" name="show" id="show" /></div>
<div id="pictitle"></div>
</div>


<script type="text/javascript">
function changeImg()
{
obj("show").src=baseurl+imglink[currentAd][0];
obj("pictitle").innerHTML="<a href='"+imglink[currentAd][1]+"' title='"+imglink[currentAd][2]+"'>"+imglink[currentAd][3]+"</a>";
currentAd++;
currentAd=(currentAd==imglink.length)?0:currentAd;
adDelay=imglink[currentAd][4];
adTimer=setTimeout("changeImg()",adDelay);
}
changeImg();

obj("pictitle").onmouseover=function(){clearTimeout(adTimer)};
obj("pictitle").onmouseout=function(){adTimer=setTimeout("changeImg()",adDelay)};
</script>
回复
allenxia 2008-03-23
感谢chinmo的代码,我正在修改您给的代码。
回复
呵呵,我写了一个很经典的,一会上传到资源下载库去
回复
 <HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function doTimer()
{
setTimeout("write1();", 2000);
}
function write1()
{
img.innerHTML="<a href='http://www.myezlife.com/cnstar.php?cid=7'><img src='http://www.myezlife.com/images/index/home_banner1.gif' border='0'/></a>";
setTimeout("write2();", 2000);
}

function write2()
{
img.innerHTML="<a href='http://www.myezlife.com/augury.php?catid=17'><img src='http://www.myezlife.com/images/index/index_banner2.gif' border='0'/></a>";
setTimeout("write3();", 3000);
}

function write3()
{
img.innerHTML="<a href='http://www.myezlife.com/augury.php?catid=17'><img src='http://www.myezlife.com/images/index/index_banner2.gif' border='0'/></a>";
doTimer();
}
doTimer();
</SCRIPT>
</HEAD>
<BODY>
<div id="img"></div>
</BODY>
</HTML>



这个也可以
图片的
回复
这个是文字的,你可以直接改成图片的
<HTML> 
<style>
<!--
#ticker
{
width:800px;
line-height:1.2em;
background-color:lightblue;
}
-->
</style>
<script language="JavaScript1.2">
//configure tickercontents[] to set the messges you wish be displayed (HTML codes accepted)//设置内容显示
var tickercontents=new Array()
tickercontents[0]='See what\'s New at Dynamic Drive. <a href=http://www.alixixi.com">[Read more]</a>'
tickercontents[1]='Browse the most popular scripts on Dynamic Drive <a href=http://www.alixixi.com/down/">[Read more]</a>'
tickercontents[2]='Link back to Dynamic Drive! <a href=http://www.alixixi.com/dev/">[Read more]</a>'

//configure the below variable to determine the delay between ticking of messages (in miliseconds//设置延迟时间
var tickdelay=3000

////Do not edit pass this line////////////////

var currentmessage=0

function changetickercontent(){
ticker.innerHTML=tickercontents[currentmessage]


if (currentmessage==tickercontents.length-1) currentmessage=0
else currentmessage++
tickdelay=parseInt(tickdelay)+parseInt(currentmessage)*1000
//alert(tickdelay);
ticker1.innerHTML=tickdelay;
setTimeout("changetickercontent()",tickdelay)
}

function start_ticking(){
changetickercontent()
}

window.onload=start_ticking
</script>
<div id="ticker"left=0 top=0></div>
<div id="ticker1"left=0 top=0></div>
</HTML>
回复
hy_lihuan 2008-03-23
up
回复
allenxia 2008-03-23
谢谢dogfish的详细回答,不过上述代码调试的时候出现错误,能给我调试一下吗?

另外能不能实现在这个基础上加一个背景音乐的功能,例如在图片1设置有背景音乐1,图片4设置有背景音乐2,当打开页面,图片由1轮显到3的时候一直放音乐1,到图片4的时候切换到音乐2.能否实现这样的功能?
回复
Dogfish 2008-03-23
修改自http://bbs.kejicun.com/thread-1530-1-1.html上的代码。没有测试过。


<script type="text/javascript">
var obj=document.getElementById;
var currentAd=0;
var adTimer;
var baseurl="http://bbs.kejicun.com/attachments/";//广告图片的根目录
var maxinfo=18;//信息栏可显示的最长字数
var adDelay=3000;//广告切换时间
var controlItemId="controlitem";//根据自己的页面为跟踪条取ID前缀
var mapcolor="#003366";//Ad跟踪条颜色,建议与信息栏的a:hover一样
var imglink=new Array();
imglink[0]=new Array("MOmo_dvA64k8KFVbF.jpg","#","MOMO","",1000) //自定义时间在这。
imglink[1]=new Array("6Iqx5qCR_e3IXxAK07FKm.jpg","#","花树","",2000)
imglink[2]=new Array("5b2i6LGh54WnMQ==_UvNZTw9LPKfb.jpg","#","单眼皮狼","",3000)
imglink[3]=new Array("5ZKq6Lev6JWD6A==_mHbaIHxQNZIj.jpg","#","小咪","",4000)
imglink[4]=new Array("shahuhu_GdoK9xPx9OaR.jpg","#","乎乎","",5000)
imglink[5]=new Array("shahuhu_GdoK9xPx9OaR.jpg","#","乎乎","",6000)
for(i=0;i<imglink.length;i++){
if(imglink[2].length<maxinfo)imglink[3]=imglink[2];
else imglink[3]=imglink[2].substring(0,maxinfo-3)+"...";}
</script>



<body>
<div id="adBox">
<div class="imgBox"><img src="http://bbs.kejicun.com/attachments/shahuhu_GdoK9xPx9OaR.jpg" alt="" name="show" id="show" style="filter: progidXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=1,motion=forward);" /></div>
<div id="control"></div>
<div id="info"></div>
</div>


<script type="text/javascript">
for(i=0;i<imglink.length;i++)
{
var itemBox=document.createElement();
itemBox.innerHTML="<div id='"+controlItemId+i+"'>"+(i+1)+"</div>";
control.appendChild(itemBox);
}
var controlItem=obj("control").getElementsByTagName("div");
function changeImg()
{
obj("show").filters[0].apply();
obj("show").src=baseurl+imglink[currentAd][0];
obj("show").filters[0].play();
obj("info").innerHTML="<a href='"+imglink[currentAd][1]+"' title='"+imglink[currentAd][2]+"'>"+imglink[currentAd][3]+"</a>";
for(i=0;i<controlItem.length;i++)
{
controlItem.style.backgroundColor=(i==currentAd)?mapcolor:"#666666";
}
currentAd++;
currentAd=(currentAd==imglink.length)?0:currentAd;
adDelay=imglink[currentAd][4];
adTimer=setTimeout("changeImg()",adDelay);
}
changeImg();
for(i=0;i<controlItem.length;i++)
{
controlItem.onclick=function()
{
clearTimeout(adTimer);
currentAd=parseInt(this.id.substring(this.id.length-1,this.id.length));
changeImg();
};
}
obj("info").onmouseover=function(){clearTimeout(adTimer)};
obj("info").onmouseout=function(){adTimer=setTimeout("changeImg()",adDelay)};
</script>
回复
JS代码:
var NowImg = 1;
var bStart = 0;
var bStop =0;
var ystime=4000;
function fnToggle()
{
var next = NowImg + 1;

if(next == MaxImg+1)
{
NowImg = MaxImg;
next = 1;
}
if(bStop!=1)
{

if(bStart == 0)
{
bStart = 1;
setTimeout('fnToggle()',ystime);
dd.innerHTML=ystime;
return;
}
else
{
oTransContainer.filters[0].Apply();

document.images['oDIV'+next].style.display = "";
document.images['oDIV'+NowImg].style.display = "none";

oTransContainer.filters[0].Play(duration=2);

if(NowImg == MaxImg){
NowImg = 1;
ystime=4000;
dd.innerHTML=ystime;
}
else{
NowImg++;
ystime=4000+(parseInt(NowImg)-1)*1000;
dd.innerHTML=ystime;
}
}
setTimeout('fnToggle()', ystime);
}
}


function toggleTo(img)
{
bStop=1;
if(img==1)
{
document.images['oDIV1'].style.display = "";
document.images['oDIV2'].style.display = "none";
document.images['oDIV3'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==2)
{
document.images['oDIV2'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV3'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==3)
{
document.images['oDIV3'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV2'].style.display = "none";
document.images['oDIV4'].style.display = "none";
}
else if(img==4)
{
document.images['oDIV4'].style.display = "";
document.images['oDIV1'].style.display = "none";
document.images['oDIV2'].style.display = "none";
document.images['oDIV3'].style.display = "none";
}

}


html代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<SCRIPT src="js/article.js"></SCRIPT>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="312" border="0" align="center" cellpadding="0" cellspacing="0" class="solidbox">
<tr>
<td width="312" height="312" align="center"><TABLE border=0 align="center" cellPadding=0 cellSpacing=0>
<TBODY>
<TR>
<TD><DIV id=oTransContainer
style="FILTER: progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=0, motion='forward'); WIDTH: 220px; HEIGHT: 194px"><A
href="http://www.myziy.com"
target=_blank><IMG id=oDIV1
style="DISPLAY: yes;"
height=300 src="images/01.jpg"
width=300 border=0></A><A
href="http://www.myziy.com"
target=_blank><IMG id=oDIV2
style="DISPLAY: none;"
height=300 src="images/02.jpg"
width=300 border=0></A><A
href="http://www.myziy.com"
target=_blank><IMG id=oDIV3
style="DISPLAY: none;"
height=300 src="images/03.jpg"
width=300 border=0></A><A
href="http://www.myziy.com"
target=_blank><IMG id=oDIV4
style="DISPLAY: none;"
height=300 src="images/04.jpg"
width=300 border=0></A></DIV>
</TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td height="22" align="right" valign="top"><script>var MaxImg = 4; fnToggle();</script>
<TABLE cellSpacing=1 cellPadding=0 width=110
border=0>
<TBODY>
<TR>
<td width="100"><div id="dd"></div></td>
<TD width=26><A href="javascript:toggleTo(1)"><IMG height=15
src="images/s_1.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(2)"><IMG height=15
src="images/s_2.gif" width=17
border=0></A></TD>
<TD width=26><A href="javascript:toggleTo(3)"><IMG height=15
src="images/s_3.gif" width=17
border=0></A></TD>
<TD width=27><A href="javascript:toggleTo(4)"><IMG height=15
src="images/s_4.gif" width=17
border=0></A></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
</table>

</body>
</html>

CSS代码:
td {font-size: 12px;}
.solidbox {
BORDER-TOP: #D7D7D7 1px solid;
BORDER-RIGHT: #D7D7D7 1px solid;
BORDER-BOTTOM: #D7D7D7 1px solid;
BORDER-LEFT: #D7D7D7 1px solid;
}
回复
相关推荐
发帖
ASP
创建于2007-09-28

2.8w+

社区成员

ASP即Active Server Pages,是Microsoft公司开发的服务器端脚本环境。
申请成为版主
帖子事件
创建了帖子
2008-03-23 12:54
社区公告
暂无公告