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

allenxia 2008-03-23 12:54:15
如题,网上大多是统一时间的,谁能帮我找找,谢谢了~~
...全文
1455 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
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
  • 打赏
  • 举报
 回复
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>
一把编程的菜刀 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; 

}
+【CSS3】使用纯css代码实现图片轮播效果
使用纯CSS3代码实现简单的图片轮播。 1.基本布局： 将5张图片左浮动横向并排放入一个div容器（#photos）内，图片设置统一尺寸，div宽度设置5个图片的总尺寸，然后放入相框容器div（#frame），相框设置1个图片的大小并设置溢出隐藏，以保证正确显示一个照片。 2.设置动画： 然后使用css3动画，通过对photos进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。 3.动画分解： 为了让图片切换后静置一段时间，可以将动画细分为：位移切换和静置两个阶段。
图片轮动显示解决方案
本文还有配套的精品资源，点击获取 简介：图片轮动显示是一种在网页或应用程序中动态展示图片的技术，常用以提供视觉上的连续幻灯片效果。该技术广泛应用于网站首页、产品展示和广告轮播等场景。此压缩包可能包含了实现该功能的HTML、JavaScript库以及Flash应用程序或插件（如SWFObject和BCASTR3）。通过文件内容可以推测BCASTR3是一个Flash应用程序或J...
Android 自定义ViewGroup实现图片滑动显示
先看效果图： 本篇我们分为三部分来讲： 图片的滑动实现 动态改变缩放值和透明度 实现右下角滚轮滑动 补充 一、图片的滑动实现 在上图中，一个屏幕里同时可以存在三张图片，这意味着每次滑动实际只滑动了1/3的屏幕宽度。当然，我们也可以只让屏幕显示一张图片，或是同时显示5张等等。我们应该设立一个变量onPagerNum来表示当前屏幕显示的图片数量 在本文中我们令onPagerNum=3，即一个屏幕出现三张图片。下面我们要计算每个图片应分配的最大宽度，先来看下图： 从图中就能很明显的得出结论
JS实现简单的轮播图（非常简单，一看就懂）
主要思路：先将需要轮播的4张图使用绝对定位让其重叠在banner这个盒子中，然后遍历所有的图片将其隐藏，再获取当前图片的index值，根据当前的index值设置当前的图片显示出来。设置间歇定时器setInterval每隔1秒使得index的值加1，如果大于图片个数则index=0，每隔1秒调用changeImg()函数，改变图片的显示。li项的实现原理一样，总的来说就是围绕index的值来进行设置...
永久解决Gitee/Github上传的文件中的图片不显示问题
永久解决Gitee/Github上传的文件中的图片不显示问题
ASP

28,409

社区成员

356,971

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章