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

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的代码，我正在修改您给的代码。

回复赞

一把编程的菜刀 2008-03-23

呵呵，我写了一个很经典的，一会上传到资源下载库去

回复赞

一把编程的菜刀 2008-03-23

 <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>

这个也可以
图片的

回复赞

一把编程的菜刀 2008-03-23

这个是文字的，你可以直接改成图片的

<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

回复赞

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>

回复赞

一把编程的菜刀 2008-03-23

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; 

}

回复赞