图片幻灯片切换特效

原创 2016年06月02日 12:44:38

第一种效果:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|Linkweb.cn/Js|--- 图片的切换</title>
</head>

<body>

<SCRIPT language="VBScript">
Dim FileList,FileListArr,TxtList,TxtListArr
FileList = "images/m_2.gif,images/m_1.gif,images/m_3.gif,images/m_4.gif"
//TxtList = "<a href=http://www.webjx.com/ target=_blank>在这里添加你的连接1</a>,<a href=http://www.webjx.com/ target=_blank>在这里添加你的连接2</a>,<a href=http://www.webjx.com/ target=_blank>在这里添加你的连接3</a>"
FileListArr = Split(FileList,",")
TxtListArr = Split(TxtList,",")
Dim CanPlay
CanPlay = CInt(Split(Split(navigator.appVersion,";")(1)," ")(2))>5
Dim FilterStr
FilterStr = "RevealTrans(duration=2,transition=23)"
FilterStr = FilterStr + ";BlendTrans(duration=2)"
If CanPlay Then
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=2,maxSquare=25)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward )"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Stretch(duration=2,stretchStyle=PUSH)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RandomDissolve(duration=2)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Spiral(duration=2,gridSizeX=50,gridSizeY=50)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Slide(duration=2,bands=1,slideStyle=SWAP)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"
FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Wipe(duration=3,gradientsize=0.25,motion=reverse)"
Else
Msgbox "幻灯片播放具有多种动态图片切换效果,但此功能需要您的浏览器为IE5.5或以上版本,否则您将只能看到部分的切换效果。",64
End If
Dim FilterArr
FilterArr = Split(FilterStr,";")
Dim PlayImg_M
PlayImg_M = 1 * 1000  '切换时间(毫秒)
Dim I
I = 1
Sub ChangeImg
Do While FileListArr(I)=""
I = I + 1
If I>UBound(FileListArr) Then I = 0
Loop
Dim J
If I>UBound(FileListArr) Then I = 0
Randomize
J = Int(Rnd * (UBound(FilterArr)+1))
Img.style.filter = FilterArr(J)
Img.filters(0).Apply
Img.Src = FileListArr(I)
Img.filters(0).play
Txt.filters(0).Apply
Txt.innerHTML = TxtListArr(I)
Txt.filters(0).play()
I = I + 1
If I>UBound(FileListArr) Then I = 0
TempImg.Src = FileListArr(I)
SetTimeout "ChangeImg", PlayImg_M,"VBScript"
End Sub
</SCRIPT>
<TABLE WIDTH="100%" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR ID="NoScript"><TD Align="Center" Style="Color:White">对不起,图片浏览功能需脚本支持,但您的浏览器已经设置了禁止脚本运行。请您在浏览器设置中调整有关安全选项。</TD></TR><TR Style="Display:none" ID="CanRunScript"><TD HEIGHT="100%" Align="Center" vAlign="Center"><Img ID="Img" height="82" width="118" Border="0" ></TD></TR><TR Style="Display:none"><TD><Img ID="TempImg" Border="0"></TD></TR></TABLE>
<Script Language="VBScript">
NoScript.Style.Display = "none"
CanRunScript.Style.Display = ""
Img.Src = FileListArr(0)
SetTimeout "ChangeImg", PlayImg_M,"VBScript"
</Script>

</body>

</html>

 
 
 
 
 
 
 
 
第二种效果:
 
 
 
<script language="JavaScript">
var elady_step=3; //1:small, 3:middle, 5:big
var elady_speed=50; //20:fast, 50:middle, 80:slow
var e_tp=new Array();
var e_tplink=new Array();
var adNum_elady1=0; 
var elady_stop_sh=0;
var elady_star_sh=1;
function elady1_moveImg(){
if ((!document.all&&!document.getElementByIdx)||(elady_stop_sh==0)) return;
if (elady_star_sh==1){
document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)+elady_step;}
else if (elady_star_sh==2){
document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)+elady_step;}
else if (elady_star_sh==3){
document.all.elady1_divimg.style.pixelTop=parseInt(document.all.elady1_divimg.style.pixelTop)-elady_step;}
else{
document.all.elady1_divimg.style.pixelLeft=parseInt(document.all.elady1_divimg.style.pixelLeft)-elady_step;}
if (elady_star_sh<4) elady_star_sh++;
else elady_star_sh=1;
setTimeout("elady1_moveImg()",elady_speed);}
e_tplink[0]="http://www.webjx.com/js/index1.htm";
e_tp[0]="images/index_33.jpg";
e_tplink[1]="http://www.webjx.com/js/index2.htm";
e_tp[1]="images/center_photo01.jpg";
e_tplink[2]="http://www.webjx.com/js/index4.htm";
e_tp[2]="images/center_photo02.jpg";
e_tplink[3]="http://www.webjx.com/js/index5.htm";
e_tp[3]="images/center_photo03.jpg";
var currentimage=new Array();  
for (i=0;i<=3;i++){currentimage[i]=new Image();
      currentimage[i].src=e_tp[i];
         }
         function elady1_set(){   if (document.all)
         {      e_tprotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
               e_tprotator.filters.revealTrans.apply();   }
               }
               function elady1_playCo()
               {   if (document.all)      e_tprotator.filters.revealTrans.play()
               }function elady1_nextAd(){   if(adNum_elady1<e_tp.length-1)adNum_elady1++ ;
                     else adNum_elady1=0;
                        elady1_set();
                           document.images.e_tprotator.src=e_tp[adNum_elady1];
                              elady1_playCo();
                                 theTimer=setTimeout("elady1_nextAd()", 4000);}
    
版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery响应式手机端移动端幻灯片图片切换特效插件slick

使用方法   1、引入文件 link rel="stylesheet" href="style/slick.css"> script src="script/jquery.mi...

jQuery TAB选项卡切换幻灯片特效

jQuery TAB选项卡切换幻灯片特效 consectetur adipiscing elit ...

jquery全屏图片幻灯片展示特效

这是一个超大的幻灯片自动扩展以填补容器来显示你的图片,可以覆盖整个屏幕,或某一区域。每张图片都可以设置平移,放大或放小等效果,还可以自定义标题和让其中内容永久展示。还可以设置幻灯片连续运行几次后停止,...

jquery图片幻灯片插件特效jquery.slider例子

jquery图片特效slider插件 @charset "utf-8"; .jquery-slider-wrapper{position:relative;zoom:1;clear:both} .j...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片幻灯片切换特效
举报原因:
原因补充:

(最多只允许输入30个字)