就昨天《关于js轮播图片得问题 ？》一帖的补充

Question

问题已经解决,现分享一下代码 
想看效果的,可以点下面的链接 看效果请点这里 昨天有大侠说这段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 1

再次补充，实现了与数据库的连接，可以后台更新了。
<%
set rs=server.createobject("adodb.recordset")
sql="select piclink,pic,title from changepic order by picorder"
rs.open sql,conn,1,1
byhsop_6=0
%><!--轮换图片开始-->
<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='<%=rs("pic")%>'; 
url1=new Image ();url1.src='<%=rs("piclink")%>';
text[1]="<%=rs("title")%>";<%
rs.movenext
%>img2=new Image ();img2.src='<%=rs("pic")%>'; 
url2=new Image ();url2.src='<%=rs("piclink")%>';
text[2]="<%=rs("title")%>";<%
rs.movenext
%>img3=new Image ();img3.src='<%=rs("pic")%>'; 
url3=new Image ();url3.src='<%=rs("piclink")%>';
text[3]="<%=rs("title")%>";<%
rs.movenext
%>img4=new Image ();img4.src='<%=rs("pic")%>'; 
url4=new Image ();url4.src='<%=rs("piclink")%>';
text[4]="<%=rs("title")%>";<%
rs.movenext
%>img5=new Image ();img5.src='<%=rs("pic")%>'; 
url5=new Image ();url5.src='<%=rs("piclink")%>';
text[5]="<%=rs("title")%>";<%
rs.movenext
%>img6=new Image ();img6.src='<%=rs("pic")%>'; 
url6=new Image ();url6.src='<%=rs("piclink")%>';
text[6]="<%=rs("title")%>";<%
rs.movenext
%>img7=new Image ();img7.src='<%=rs("pic")%>'; 
url7=new Image ();url7.src='<%=rs("piclink")%>';
text[7]="<%=rs("title")%>";<%
rs.movenext
%>img8=new Image ();img8.src='<%=rs("pic")%>'; 
url8=new Image ();url8.src='<%=rs("piclink")%>';
text[8]="<%=rs("title")%>";<%
rs.movenext
%>img9=new Image ();img9.src='<%=rs("pic")%>'; 
url9=new Image ();url9.src='<%=rs("piclink")%>';
text[9]="<%=rs("title")%>";<%
rs.close
%>
                                        
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 2

ASP的？只对JS这块感兴趣。收藏学习

Answer 3

一般都是使用JS+FLASH播放器
直接用JS+div+CSS做的 基本也就那样了！

Answer 4

那你就用JS+FLASH播放器的吧
那样的好弄一点