求一个像新浪一样，可以变换图片的JS？

[tinqinman]

看到新浪上的图片可以变，每张图都是不同连接，还有效果，比如“百叶窗”，很羡慕！
高手指点呀！！！

[hhjjhjhj]

CSS中的filter
参见CSS相关资料

[tinqinman]

这位大哥有例子吗？

[rueir]

<map name="addmap">
<area id=imgmap shape=rect coords="0,0,180,180" href="HTTP：//WWW.RADINF.COM" >
</map>
<DIV ID="rotImg"
STYLE="position:ABSOLUTE;
height:175;
width:180;
top:567px;
left:117px;
background-color:#FFFFFF;
filter:revealTrans(Duration=4.0, Transition=12)"
onFilterChange="changeTrans()"> <IMG id="image1" STYLE="POSITION:absolute;TOP:0;LEFT:0" SRC="" ../iisHelp/iis/htm/tutorial/rotate.htm#addmap>
<IMG id="image2" STYLE="POSITION:absolute;TOP:0;LEFT:0" SRC="" ../iis/htm/tutorial/rotate.htm#addmap>
</DIV>

[rueir]

接上:
把下面的代码加在最后:
<SCRIPT LANGUAGE="JavaScript">

//Variable Definitions
//
//
var teffect = 0; //Index of the current effect
var transitions = 23; //Total number of transition effects; 23 is the maximum.
var speed=3.0; //Transition speed
var index =1; //Index number used to reference images

//Array Definitions
img = new Array(5); //This array contains the image names
link = new Array(5); //This array contains image Web links


//This function start the image rotation when this page is loaded into a Web browser.
function startRot(){

//Define four ad images to rotate and related Web links
//
img[1] = "Images/gif/01.JPG";
img[2] = "Images/gif/02.JPG";
img[3] = "Images/gif/03.JPG";
img[4] = "Images/gif/01.JPG";

link[1] = "HTTP：//WWW.RADINF.COM";
link[2] = "HTTP：//WWW.RADINF.COM";
link[3] = "HTTP：//WWW.RADINF.COM";
link[4] = "HTTP：//WWW.RADINF.COM";

//Define dimension of images
var imgHeight = 140;
var imgWidth = 180;

//Define the default images that the rotators displays first and set their dimensions
image1.src = img[1];
image1.src = img[2];

imgmap.coords = "0,0," + imgWidth + "," + imgHeight;
rotImg.style.height = imgHeight;
rotImg.style.width = imgWidth;

//Prepare to begin image rotation
image1.style.visibility = "hidden";
transImage();

}

//When the transition is completed, select a new transition filter.
function changeTrans() {
if (teffect%4 == 0) {
index = 0;
}
index = index + 1;
//Delay rendering next image for 1 second (1000 milliseconds)
window.setTimeout( 'transImage()', 1000);

}

function transImage() {

//Freeze image
rotImg.filters.item(0).Apply();
rotImg.filters.item(0).transition = teffect;

if (teffect % 2 == 0) {

image1.src = img[index];
image1.style.visibility = "";
imgmap.href = link[index];
image2.style.visibility = "hidden";

}

else {

image2.src = img[index];
image2.style.visibility = "";
imgmap.href = link[index];
image1.style.visibility = "hidden";
}

//Start transition
rotImg.filters(0).Play(speed);

bTransInProgress = true;

teffect = teffect + 1;
if (teffect > transitions) {
teffect = 0;
}

}

</SCRIPT>

[rueir]

把中间的连捷修改:
图片路径

[tinqinman]

是这个吧：
img[1] = "/Images/corporate.gif";
img[2] = "/Images/dd.gif";
img[3] = "/Images/dy.gif";
img[4] = "/Images/download-menu-bg.gif";
但图象无法显示？

[rueir]

你还是把图片名称换成数字:01.gif;02.gif;...
images/01.gif;
images/02.gif;

[rueir]

路径的问题啊!(图片)

[tinqinman]

还是不行？？

[19az]

动态的代码如下：

<!--#include file="conn.asp"-->
<%

'例子说明 ,字段photo存图片的名称,url存图片的链接地址
response.write("<form name='form1' method=post>")
'sql语句
sql="select * from users"

set rs=server.createobject("adodb.recordset")
rs.open sql,conn,1,1
if not rs.eof then
redim imags(rs.recordcount)
for i=1 to rs.recordcount
if not rs.eof then
imags(i-1)=rs("photo")
'图片名称
t=rs("url")
rs.movenext
end if
next
rs.movefirst
for i=0 to rs.recordcount-1
if not rs.eof then
t=rs("url")
'图片链接
'response.write t

response.write("<input name=m value=image/"&rs("photo")&" type=hidden>")
response.write("<input name=t value="&t&" type=hidden>")
%>

<SCRIPT language=JavaScript>
<!-- // BannerAD

var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;
var k=0;
for(k=0;k<form1.m.length;k++){
bannerAD[k]=form1.m[k].value;
bannerADlink[k]=form1.t[k].value;
}


var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}

function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}

function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}

function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 3600);
}

function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}

//-->
</SCRIPT>
<%
rs.movenext
end if
next
%>
</form>
<META content='MSHTML 6.00.3790.0' name=GENERATOR><title></title></HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>
<TABLE height=431 cellSpacing=0 cellPadding=0 width=100 border=0>
<TBODY>
<TR>

<TD><A onmouseover='displayStatusMsg();return document.returnValue' href='javascript:jump2url()'><IMG style='FILTER: revealTrans(duration=2,transition=20)' height=431 src=image/<%=imags(0)%> width=560 border=0 name=bannerADrotator></A></TD>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
</TR></TBODY></TABLE>

</BODY></HTML>
<%
end if
%>

[19az]

<HEAD>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript">
<!--
if (window.Event)
document.captureEvents(Event.MOUSEUP);
function nocontextmenu()
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
function norightclick(e)
{
if (window.Event)
{
if (e.which == 2 || e.which == 3)
return false;
}
else
if (event.button == 2 || event.button == 3)
{
event.cancelBubble = true
event.returnValue = false;
return false;
}
}
document.oncontextmenu = nocontextmenu; // for IE5+
document.onmousedown = norightclick; // for all others
//-->
</script>

<SCRIPT language=JavaScript>
<!-- // BannerAD

var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;

bannerAD[0]="image/01_1.gif";
bannerADlink[0]="fasdfsadfsadfs";

bannerAD[1]="image/02_1.gif";
bannerADlink[1]="";

bannerAD[2]="image/03_1.gif";
bannerADlink[2]="";

bannerAD[3]="image/04_1.gif";
bannerADlink[3]="";

bannerAD[4]="image/05_1.gif";
bannerADlink[4]="";

bannerAD[5]="image/06_1.gif";
bannerADlink[5]="";

bannerAD[6]="image/07_1.gif";
bannerADlink[6]="";

bannerAD[7]="image/08_1.gif";
bannerADlink[7]="";



var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}

function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}

function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}

function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 3600);
}

function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}

//-->
</SCRIPT>

<META content="MSHTML 6.00.3790.0" name=GENERATOR><title></title></HEAD>
<BODY leftMargin=0 topMargin=0 marginwidth="0" marginheight="0">
<TABLE height=431 cellSpacing=0 cellPadding=0 width=100 border=0>
<TBODY>
<TR>

<TD><A onmouseover="displayStatusMsg();return document.returnValue"
href="javascript:jump2url()"><IMG
style="FILTER: revealTrans(duration=2,transition=20)" height=431
src="image/06_1.gif" width=560 border=0
name=bannerADrotator></A></TD>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
</TR></TBODY></TABLE>
</BODY></HTML>

我的这个绝对没有问题的，你只需要将图片地址改对就可以了…… 有问题call me

[skming美女相册]

用个变量控制哟。可以用整数。随机数控制
路径里设置一个变量
随机变量。
图片命名为1到10的整数。
随即范围也为1到10这样就可以了

[sys006]

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态图片</title>
</head>

<body>
<table width=172 border=0 cellpadding=0 cellspacing=0>
<tr><td width=10 background=http://image2.sina.com.cn/ast/newimage/images2/xz10.gif></td>
<td width=152 height=170 align=center><!-- 动态图开始 -->
<script language=JavaScript>

var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;

imgUrl[1]="http://image2.sina.com.cn/ast/ot/2004-09-23/U516P54T3D13300F62DT20040923145742.jpg";
imgLink[1]="http://astro.eladies.sina.com.cn/ot/2004-09-23/13294.shtml";
imgUrl[2]="http://image2.sina.com.cn/ast/ot/2004-09-23/U516P54T3D13300F63DT20040923145742.jpg";
imgLink[2]="http://astro.eladies.sina.com.cn/ot/2004-09-23/13294.shtml";
imgUrl[3]="http://image2.sina.com.cn/ast/ot/2004-09-23/U516P54T3D13300F64DT20040923145742.jpg";
imgLink[3]="http://astro.eladies.sina.com.cn/ot/2004-09-23/13294.shtml";
imgUrl[4]="http://image2.sina.com.cn/ast/ot/2004-09-23/U516P54T3D13300F387DT20040923145742.jpg";
imgLink[4]="http://astro.eladies.sina.com.cn/ot/2004-09-23/13294.shtml";

var imgPre=new Array();
var imgj=0;
for (imgi=1;imgi<=4;imgi++) {
if( (imgUrl[imgi]!="") && (imgLink[imgi]!="") ) {
imgj++;
} else {
break;
}
}

function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}

var key=0;
function nextAd(){
if(adNum<imgj)adNum++ ;
else adNum=1;

if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=6;
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[adNum];
theTimer=setTimeout("nextAd()", 6000);
}


function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
<a href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=2,transition=20);border-color:black;color:#000000" src="javascript:nextAd()" width=152 height=170 border=1 class=img01 name=imgInit></a><!--a href=http://astro.eladies.sina.com.cn/ot/2004-09-15/13175.shtml class=a04 target=_blank><img src="http://image2.sina.com.cn/ast/U516P54T41D1F752DT20040923153302.jpg" width="152" height="170"></a--></td>
<td width=10 background=http://image2.sina.com.cn/ast/newimage/images2/xz11.gif valign=top><img src="http://image2.sina.com.cn/ast/newimage/images2/xz12.gif" width="10" height="4"></td>
</tr>
</table>
<table width=172 border=0 cellpadding=0 cellspacing=0>
<tr><td width=172 height=23 background=http://image2.sina.com.cn/ast/newimage/images2/xz13.gif align=center><a href=http://astro.eladies.sina.com.cn/ot/2004-09-23/13294.shtml class=a06 target=_blank><font style="font-size:12px;color:#0060FF;height:0;filter:dropshadow(OffX=1, OffY=1,Color=#ffffff)"><b>标题</b></font></a></td></tr>
</table>

</td>

<td width=419 valign=top style="padding-top:17px"> 
</body>
</html>
这个是新浪的动态图片的显示，显示方式就一种，没有 19az(相信我，没错的！) 那么多的显示方式，但是也不错的。

[sssmmm]

up

[tinqinman]

谢谢了！