图片幻灯片切换特效

原创 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);}
    
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS幻灯片切换效果

/**  * jQuery Carousel.js   * 旋转木马  */ ; (function($) {     var Carousel = function(poster) { ...
  • MayJay517
  • MayJay517
  • 2017年09月13日 21:53
  • 167

18款 非常实用 jquery幻灯片图片切换

http://www.iteye.com/topic/1125861 1、jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banne...
  • mituan1234567
  • mituan1234567
  • 2015年04月09日 11:07
  • 938

Android 图片切换特效 AndroidImageSlider

※效果 ※简介 一款很实用的用于制作幻灯片的组件,动画效果很好,可直接加载本...
  • aoshiwenrou
  • aoshiwenrou
  • 2014年10月23日 10:54
  • 2137

HTML实现图片幻灯片切换源代码

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...
  • developerof
  • developerof
  • 2013年12月01日 11:11
  • 724

Jquery图片自动幻灯片效果

效果如图: 首先Html文件: 1 ...
  • GQ_cyan
  • GQ_cyan
  • 2017年03月20日 17:36
  • 420

android实战项目六imageview做一个幻灯片效果

imageview做一个幻灯片效果这是从本地获取图片的方法,在Android4.0之后,增加了一些新特性,也增加了一些限制。其中有一个限制就是不能在主线程中访问网络,必须另开一条线程访问。但是这里又存...
  • tangsilian
  • tangsilian
  • 2016年04月14日 10:39
  • 2068

FLIASH幻灯片切换特效

       var imgUrl=new Array();      var imgLink=new Array();      var adNum=0;      imgUrl[1]="http:...
  • yifeiyuann
  • yifeiyuann
  • 2008年11月06日 10:39
  • 1090

android 幻灯片效果之百叶窗

实现原理: 使用SurfaceView一直重绘实现该动画效果 先看效果图: 代码实现: 1.幻灯片基类: package com.open.turnpage; import andro...
  • ZZ7ZZ7ZZ
  • ZZ7ZZ7ZZ
  • 2013年12月14日 23:45
  • 3673

图片擦洗幻灯片特效

var elady_step=3; //1:small, 3:middle, 5:big var elady_speed=50; //20:fast, 50:middle, 80:slow var e...
  • haibo0668
  • haibo0668
  • 2016年06月02日 12:45
  • 90

js实现幻灯片自动切换

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
  • cgt_0812
  • cgt_0812
  • 2016年10月13日 10:23
  • 998
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:图片幻灯片切换特效
举报原因:
原因补充:

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