轮换广告特效
http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
自己写了个图片轮播广告特效，css不太熟悉，样式有待修改。代码如下：
查看效果：图片轮换特效
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style type="text/css">
body{ font-size:14px;}
#forasp{height:200px; width:300px;overflow:hidden; text-align:center; line-height:200px;}
#foraspcn_num,#foraspcn_title {z-index:999;height:20px; list-style-type:none; background-color:#E7E7E7; filter:alpha(Opacity=50)}
#foraspcn_num li{ float:left; width:15px; background-color:#E7E7E7; cursor:hand; text-align:center; border-right:solid 1px #F00;}
</style>
<script language="javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
<!--
var showType = 2;
var delay_ = 4;
var i = 0;
var num,obj_Inter;
function change_img(index){
i=index;clearInterval(obj_Inter);
$("#foraspcn_num>li").css("background-color","#E7E7E7");
var t = $("#foraspcn_num>li:eq("+index+")").css("background-color","#FF0000").attr("t").split("|");
var obj =document.getElementById("imgInit");
var cobj =document.getElementById("forasp");
if(document.all){
obj.filters.revealTrans.Transition=23;
/**
0 : 矩形收缩转换。
1 : 矩形扩张转换。
2 : 圆形收缩转换。
3 : 圆形扩张转换。
4 : 向上擦除。
5 : 向下擦除。
6 : 向右擦除。
7 : 向左擦除。
8 : 纵向百叶窗转换。
9 : 横向百叶窗转换。
10 : 国际象棋棋盘横向转换。
11 : 国际象棋棋盘纵向转换。
12 : 随机杂点干扰转换。
13 : 左右关门效果转换。
14 : 左右开门效果转换。
15 : 上下关门效果转换。
16 : 上下开门效果转换。
17 : 从右上角到左下角的锯齿边覆盖效果转换。
18 : 从右下角到左上角的锯齿边覆盖效果转换。
19 : 从左上角到右下角的锯齿边覆盖效果转换。
20 : 从左下角到右上角的锯齿边覆盖效果转换。
21 : 随机横线条转换。
22 : 随机竖线条转换。
23 : 随机使用上面可能的值转换。
*/
obj.filters.revealTrans.apply();
obj.filters.revealTrans.play();
}
obj.src=t[1];
$("#forasp>a").attr({"target":"_blank","href":t[2]});
$("#foraspcn_title>a").attr({"target":"_blank","href":t[2]}).text(t[0]);
if(showType!=0){obj_Inter = setInterval(play,delay_*1000);i=index+1;}
}
function play(){
switch(showType){
case 0: change_img(i);break;
case 1:if(i>=num)i=0;change_img(i);i++;break;break;
case 2:do{var temp = Math.round(Math.random()*(num-1));}while(i==temp);change_img(temp);break;
}
}
function begin(){
num = $("#foraspcn_num>li").size();
var f_o =$("#forasp");
var ft_o = $("#foraspcn_title").css("position","absolute");;
var fn_o = $("#foraspcn_num").css("position","absolute");
var f_p =f_o.offset();//这里是获取主位置
var fn_top = f_p.top + parseInt(f_o.css("height"));
var fn_left = f_p.left+ parseInt(f_o.css("width"));
fn_o.css({"top":fn_top-parseInt(fn_o.css("height"))*2,"left":fn_left-num*15-6});
ft_o.css({"top":fn_top-parseInt(fn_o.css("height")),"left":f_p.lef,"width":f_o.css("width")});
///位置设置完毕开始触发事件事件
$("#foraspcn_num>li").each(function(index){$(this).click(function(){change_img(index);});});
///根据分类进行执行
switch(showType){case 0:i=0;play();break;default:play();obj_Inter =setInterval(play,delay_*1000);}
}
$(function(){
// setTimeout(change_img,1000);
begin();
});
-->
</script>
</head>
<body>
<div id="forasp">
<a href="#" target="_blank"><img src="loadsmall.gif" id="imgInit" border="0" style="FILTER: revealTrans(duration=2,transition=6)"></a>
</div><br>
<div id="foraspcn_title"><a href="#"></a></div>
<div id="foraspcn_num" style= "position:absolute;">
<li t="Handy Code|1.jpg|http://www.forasp.cn/">1</li>
<li t="美景如画的海景|images/2.jpg|http://www.forasp.cn/">2</li>
<li t="郁郁葱葱的生命|images/3.jpg|http://www.forasp.cn/">3</li>
<li t="孤独的一棵老树|images/4.jpg|http://www.forasp.cn/">4</li>
<li t="明媚的向日葵花|images/5.jpg|http://www.forasp.cn/">5</li>
</div>
<br><br>
这个特效是看到前面的一个特效<a href="http://www.forasp.cn/html/2283.html" target="_blank">http://www.forasp.cn/html/2283.html</a>，本站原创编写的，也是分为三种模式，点击，顺序，随机三种模式。可供大家使用。
<br><a href="http://www.forasp.cn/">网站制作学习网</a>原创，转载请注明！
</body>
</html>
学习www.网for站asp制.cn作