关于js轮播图片得问题

Question

代码我已经写好了大部分得,还有一点就是想实现迅雷首页轮播图片得样式,那个文字链接我始终弄不上去,哪位帮忙看看,帮我改一下. 前面得没有给分,现在重发一个
我做好得样式请看:http://www.zdtz888.cn 
迅雷样式请看:http://www.xunlei.com 我得原代码如下: <!--轮换图片开始--> 
<SCRIPT> 
//Alpha：设置透明度  
//Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)  
//Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。  
//FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。  
//Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。  
//StartX和StartY：代表渐变透明效果的开始X和Y坐标。  
//FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。 
var widths=300;               
var heights=180;               
var counts=9;    
                                         
img1=new Image ();img1.src='image/img/sy/01.jpg';  
img2=new Image ();img2.src='image/img/sy/02.jpg';  
img3=new Image ();img3.src='image/img/sy/03.jpg';  
img4=new Image ();img4.src='image/img/sy/04.jpg';   
                                         
url1=new Image ();url1.src='image/img/sy/01.jpg'; 
url2=new Image ();url2.src='image/img/sy/02.jpg'; 
url3=new Image ();url3.src='image/img/sy/03.jpg'; 
url4=new Image ();url4.src='image/img/sy/04.jpg'; 
                                         
var nn=1; 
var key=0; 
function change_img() 
{if(key==0){key=1;} 
else if(document.all) 
//下面去掉一个后只有切换效果,没有滤镜效果 
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);} 
eval('document.getElementById("pic").src=img'+nn+'.src'); 
eval('document.getElementById("url").href=url'+nn+'.src'); 
for (var i=1;i <=counts;i++){document.getElementById("xxjdjj"+i).className='axx';} 
for (var j=1;j <=counts;j++){document.getElementById("xxjdjj"+j).className='bxx';} 
nn++;if(nn> counts){nn=1;} 
tt=setTimeout('change_img()',5000);} function changeimg(n){nn=n;window.clearInterval(tt);change_img();} 
document.write(' <style> '); 
document.write('.axx{padding:2px 2px;border:0px;width:30%;margin:1px;}'); 
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#333;}'); 
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#666;}'); 
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}'); 
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#D34600;}'); 
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#D34600;}'); 
document.write(' </style> '); 
document.write(' <div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;"> '); 
document.write(' <div> <a id="url" target="_blank"> <img id="pic"  style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=0.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /> </a> </div> '); 
                                         
document.write(' <div style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:250px;text-align:left;top:-50px;position:relative;margin:1px;height:50px;padding:0px;margin:0px;border:0px; float:left; border-top:1px solid #888;"> '); 
for(var j=1;j <counts+1;j++){document.write(' <a href="javascript:changeimg('+j+');" id="xxjdjj'+j+'" class="bxx" target="_self"> </a> ');} 
document.write(' </div> '); document.write(' <div style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:50px;text-align:right;top:-50px;position:relative;margin:1px;height:50px;padding:1px;margin:0px;border:0px; float:right; border-top:1px solid #888;"> '); 
for(var i=1;i <counts+1;i++){document.write(' <a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self"> '+i+' </a> ');} 
document.write(' </div> </div> '); 
change_img(); 
</SCRIPT> 
<!--轮换图片结束--> 

Answer 1

img1=new Image ();img1.src='image/img/sy/01.jpg';   
img2=new Image ();img2.src='image/img/sy/02.jpg';   
img3=new Image ();img3.src='image/img/sy/03.jpg';   
img4=new Image ();img4.src='image/img/sy/04.jpg';变成数组不得了，干啥eval啊。。而且这个代码耦合度太大了，不太爽的感觉

Answer 2

http://www.xunlei.com/main_new.swf
呵呵，你说的是不是迅雷的这个？？

Answer 3

用sina的flash+调用的js代码或者是拿csdn首页的代码

Answer 4

我得文本要放在那个半透明得div内,水平居左

Answer 5

已经放进了文本,但,不是我想要得效果,哪位再帮忙改改啊
<!--轮换图片开始-->
                                       <SCRIPT>
                                        //Alpha：设置透明度 
                                        //Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 
                                        //Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。 
                                        //FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。 
                                        //Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。 
                                        //StartX和StartY：代表渐变透明效果的开始X和Y坐标。 
                                        //FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
                                        var widths=300;              
                                        var heights=180;              
                                        var counts=9; 
var text=new Array();  
                                        
img1=new Image ();img1.src='image/img/sy/01.jpg'; 
                                        img2=new Image ();img2.src='image/img/sy/02.jpg'; 
                                        img3=new Image ();img3.src='image/img/sy/03.jpg'; 
                                        img4=new Image ();img4.src='image/img/sy/04.jpg';  
                                        
                                        url1=new Image ();url1.src='http://www.zdtz888.cn';
                                        url2=new Image ();url2.src='image/img/sy/02.jpg';
                                        url3=new Image ();url3.src='image/img/sy/03.jpg';
                                        url4=new Image ();url4.src='image/img/sy/04.jpg';

text[1]="大标题1";
                                        text[2]="大标题2";
text[3]="大标题3";
text[4]="大标题4";
text[5]="大标题5";
text[6]="大标题6";
text[7]="大标题7";
text[8]="大标题8";
text[9]="大标题9";
    
    
                                        var nn=1;
                                        var key=0;
                                        function change_img()
                                        {if(key==0){key=1;}
                                        else if(document.all)
                                        //下面去掉一个后只有切换效果,没有滤镜效果
                                        {document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
                                        //{document.getElementById("pic").filters[0].Play(duration=2);}
                                        eval('document.getElementById("pic").src=img'+nn+'.src');
                                        eval('document.getElementById("url").href=url'+nn+'.src');

for (var j=1;j<=counts;j++)eval('document.getElementById("xxjdjj"+j).href=url'+nn+'.src');
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
                                        for (var j=1;j<=counts;j++){document.getElementById("xxjdjj"+j).className='bxx';}
                                        nn++;if(nn>counts){nn=1;}
                                        tt=setTimeout('change_img()',5000);}
                                        function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
                                        document.write('<style>');
                                        document.write('.axx{padding:2px 2px;border:0px;width:30%;margin:1px;}');
                                        document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#333;}');
                                        document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#666;}');
                                        document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
                                        document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#D34600;}');
                                        document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:18px;font:9px sans-serif;background-color:#D34600;}');
                                        document.write('</style>');
                                        document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
                                        document.write('<div><a id="url" target="_blank"><img id="pic"  style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=0.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
                                        
document.write('<div style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:250px;text-align:left;top:-50px;position:relative;margin:1px;height:50px;padding:0px;margin:0px;border:0px; float:left; border-top:1px solid #888;">');
for(var j=1;j<counts+1;j++){document.write('<a id="xxjdjj'+j+'" class="bxx" target="_blank">'+text[j]+'</a>');}
document.write('</div>'); document.write('<div style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:50px;text-align:right;top:-50px;position:relative;margin:1px;height:50px;padding:1px;margin:0px;border:0px; float:right; border-top:1px solid #888;">');
                                        for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
                                        document.write('</div></div>');
                                        change_img();
                                        </SCRIPT>
                                     <!--轮换图片结束-->

Answer 6

问题已经解决,现分享一下代码
想看效果的,可以点下面的链接看效果请点这里昨天有大侠说这段js代码的耦合度不好,因为我是新手,所以只能做到实现自己想要的效果而已,至于其他的,我希望能有高手能帮我改一下.在这里先谢谢了,虽然我提的问题已经解决了,但是如果哪位大侠能将他改的更好,我还是会结分的.希望感兴趣的可以试试.<!--轮换图片开始-->
<SCRIPT>
//Alpha：设置透明度 
//Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 
//Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。 
//FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。 
//Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。 
//StartX和StartY：代表渐变透明效果的开始X和Y坐标。 
//FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。
var widths=300;              
var heights=180;              
var counts=9; 
var text=new Array();  
var stext=new Array();  
                                        
img1=new Image ();img1.src='image/img/sy/01.jpg'; 
img2=new Image ();img2.src='image/img/sy/02.jpg'; 
img3=new Image ();img3.src='image/img/sy/03.jpg'; 
img4=new Image ();img4.src='image/img/sy/04.jpg';  
img5=new Image ();img5.src='image/img/sy/01.jpg'; 
img6=new Image ();img6.src='image/img/sy/02.jpg'; 
img7=new Image ();img7.src='image/img/sy/03.jpg'; 
img8=new Image ();img8.src='image/img/sy/04.jpg';  
img9=new Image ();img9.src='image/img/sy/04.jpg';  
                                        
url1=new Image ();url1.src='http://www.zdtz888.cn';
url2=new Image ();url2.src='image/img/sy/02.jpg';
url3=new Image ();url3.src='image/img/sy/03.jpg';
url4=new Image ();url4.src='image/img/sy/04.jpg';
url5=new Image ();url5.src='http://www.zdtz888.cn';
url6=new Image ();url6.src='image/img/sy/02.jpg';
url7=new Image ();url7.src='image/img/sy/03.jpg';
url8=new Image ();url8.src='image/img/sy/04.jpg';
url9=new Image ();url9.src='image/img/sy/04.jpg';

text[1]="大标题1大标题1大标题1大标题1大标题1大标题1大标题1大标题1大标题1大标题1大标题1";
text[2]="大标题2";
text[3]="大标题3";
text[4]="大标题4";
text[5]="大标题5";
text[6]="大标题6";
text[7]="大标题7";
text[8]="大标题8";
text[9]="大标题9";var nn=1;
var key=0;
function change_img()
{
if(key==0){key=1;}
else if(document.all)
//下面去掉一个后只有切换效果,没有滤镜效果
{document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}
//{document.getElementById("pic").filters[0].Play(duration=2);}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
eval('document.getElementById("link").href=url'+nn+'.src');document.getElementById('link').innerHTML='<p title="'+text[nn]+'">'+text[nn]+'</p>';
for (var i=1;i<=counts;i++){document.getElementById("xxjdjj"+i).className='axx';}
document.getElementById("xxjdjj"+nn).className='cxx';nn++;if(nn>counts){nn=1;}
tt=setTimeout('change_img()',5000);
}
function changeimg(n){nn=n;window.clearInterval(tt);change_img();}
document.write('<style>');
document.write('.axx{padding:1px 1px;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#333;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#666;border:0px;width:30%;height:28%;margin:1px;}');document.write('.cxx{padding:1px 1px;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.cxx:link,a.cxx:visited{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#FF0000;border:0px;width:30%;height:28%;margin:1px;}');
document.write('a.cxx:active,a.cxx:hover{text-decoration:none;color:#fff;font:9px sans-serif;background-color:#FF0000;border:0px;width:30%;height:28%;margin:1px;}');document.write('.bxx{padding:2px 2px;width:80%; float:left;color:#fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;text-decoration:none;}');document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url" target="_blank"><img id="pic"  style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=0.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
                                        
document.write('<div id="font" style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:250px;text-align:left;top:-50px;position:relative;margin:1px;height:50px;padding:10px 0px 10px 10px;margin:0px;border:0px; float:left; border-top:1px solid #888;">');
document.write('<a id="link" class="bxx" target="_blank"></a>');
document.write('</div>');document.write('<div  style="filter:alpha(style=2,opacity=70,finishOpacity=60);background: #000;width:50px;text-align:center;;top:-50px;position:relative;margin:1px;height:50px;padding:1px;margin:0px;border:0px; float:right; border-top:1px solid #888;">');
for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');}
document.write('</div></div>');change_img();
</SCRIPT>
<!--轮换图片结束-->
<style>
#font {
font-family:"黑体";
font-size:16px;
</style>

Answer 7

与其没有通用的，不如改成flash+JavaScript实现的好点！

Answer 8

一般都是在后台用程序生成XML,再通过JS调用XML显示,可做到FF和IE下通用,而不是直接在页面用JS来控制文字和图像

Answer 9

迅雷的代码演示在这里：http://www.xq168.cn

Answer 10

http://www.sino8848.com/article_detail.asp?typeid=64&id=988
你看看对你有没有帮助