首页 | 博客群 | 公社 | 专栏 | 论坛 | 图片 | 资讯 | 注册 | 帮助 | 博客联播 | 随机访问
同仁堂 2006年8月7日- -| 回首页 | 2006年索引 | - -最后的"大栅栏"

网页基础系列----幻灯篇

                                      

一。手动图片幻灯片显示效果代码：

<style type="text/css">
<!--
select {  font-family: "tahoma"; font-size: 10px; color: #666666}
input {  font-family: "tahoma"; font-size: 10px; color: #000000; border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

var rotate_delay = 1000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}

</script>
<body bgcolor="#FFFFFF" text="#000000">
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
      <td align=center bgcolor="white" width=200 height=200> <img src="图片地址1" name="show">
      </td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="图片地址1" selected>1
<option value="2.jpg">2
<option value="3.jpg">3
<option value="4.jpg">4
<option value="5.jpg">5
<option value="6.jpg">6
<option value="7.jpg">7
<option value="8.jpg">8
<option value="9.jpg">9
<option value="10.jpg">10
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#C0C0C0">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="开始" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</body>

二。自动播放幻灯显示代码一：

<div align=center><script language="javascript"> var adImg = new Array(); var adLink = new Array(); var cID = 0; adImg[0] = "图片1地址"; adLink[0] = "图片1地址"; adImg[1] = "图片2地址"; adLink[1] = "图片2地址"; adImg[2] = "图片3地址"; adLink[2] = "图片3地址"; adImg[3] = "图片3地址"; adLink[3] = "图片3地址";adImg[4] = "图片3地址"; adLink[4] = "图片3地址";adImg[5] = "图片3地址"; adLink[5] = "图片3地址";adImg[6] = "图片3地址"; adLink[6] = "图片3地址";adImg[7] = "图片3地址"; adLink[7] = "图片3地址";adImg[8] = "图片3地址"; adLink[8] = "图片3地址";adImg[9] = "图片3地址"; adLink[9] = "图片3地址";adImg[10] = "图片3地址"; adLink[10] = "图片3地址";adImg[11] = "图片3地址"; adLink[11] = "图片3地址";adImg[11] = "图片3地址"; adLink[12] = "图片3地址";adImg[13] = "图片3地址"; adLink[13] = "图片3地址";adImg[14] = "图片3地址"; adLink[14] = "图片3地址";adImg[15] = "图片3地址"; adLink[15] = "图片3地址";adImg[16] = "图片3地址"; adLink[16] = "图片3地址";adImg[17] = "图片3地址"; adLink[17] = "图片3地址";adImg[18] = "图片3地址"; adLink[18] = "图片3地址";var preImgs = new Array(); for(i=0;i<3;i++) { preImgs[i] = new Image(); preImgs[i].src = adImg[i]; } function NextAd() { if(cID ==19 )cID=0; if(document.all) { imgAD.filters.revealTrans.Transition=Math.floor(Math.random()*23); imgAD.filters.revealTrans.apply(); imgAD.src = adImg[cID]; imgAD.filters.revealTrans.play(); cID++; setTimeout("NextAd()", 4000); } } function ShowLink() { document.returnValue = true; } function Go2Url() { window.open(adLink[cID-1]); }</script> <a onMouseOver="javascript:ShowLink();return document.returnValue;" href="javascript:Go2Url();">   
<img name="imgAD" style="FILTER: revealTrans(duration=2,transition=20);BORDER-RIGHT:#cccccc 1px solid; BORDER-TOP:#cccccc 1px solid; BORDER-LEFT:#cccccc 1px solid; BORDER-BOTTOM:#cccccc 1px solid" src="javascript:NextAd()" border="0"  width="361" height="213" hspace="0"></div>

三。自动播放幻灯显示代码二：

不但具有模板一的可以显示全部效果,同时它还可以选择单一效果来显示,它是更先近的一种.

<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
imgUrl[1]="图片地址1";
imgLink[1]="超链地址1";
imgUrl[2]="图片地址2";
imgLink[2]="超链地址2";
imgUrl[3]="图片地址3";
imgLink[3]="超链地址3";
imgUrl[4]="图片地址4";
imgLink[4]="超链地址4";
imgUrl[5]="图片地址5";
imgLink[5]="超链地址5";
imgUrl[6]="图片地址6";
imgLink[6]="超链地址6";
imgUrl[7]="图片地址7";
imgLink[7]="超链地址7";
imgUrl[8]="图片地址8";
imgLink[8]="超链地址8";
imgUrl[9]="图片地址9";
imgLink[9]="超链地址9";
imgUrl[10]="图片地址10";
imgLink[10]="超链地址10";


var imgPre=new Array();
var j=0;
for (i=1;i<=10;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j++;
} else {
break;
}
}

function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;

if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=22; /*==改变数值(如22)可得到不同的效果,不过当值为23时所有效里同时出现====*/
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[adNum];
theTimer=setTimeout("nextAd()", 5000);
}

function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank'; /*====如果为'_blank'时,单击图片时相关链接就会在新窗口打开.如果为'_helf'时它会在当新网片显示======*/
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
<a href="javascript:goUrl()"><div aligm=right><img style="FILTER: revealTrans(duration=2,transition=6);border-color:#000000;color:#000000" src="javascript:nextAd()" width=150 border=1 class=moviepic name=imgInit height="200"></div></a>

四。自动播放幻灯显示代码三：

<style type=text/css>
#divScroller1 {WIDTH: 270px;HEIGHT: 150px; OVERFLOW: hidden; POSITION: absolute; visbility: visible}
.dynPage {POSITION: absolute; TOP: 0px; VISIBILITY: hidden;}
</style>
<script language=JavaScript type=text/javascript>
function lib_bwcheck(){
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf("Opera 5")>-1
 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
 this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
 this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf("Mac")>-1
 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
 this.ns4=(document.layers && !this.dom)?1:0;
 this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
 return this
}
var bw=new lib_bwcheck()
var numScrollPages = 4     
var transitionOut = 1;     
var transitionIn = 1;      
var slideAcceleration = 0.5;

if(document.layers){ //NS4 resize fix...
 scrX= innerWidth; scrY= innerHeight;
 onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}
function scrollerobj(obj,nest){
 nest = (!nest)?"":'document.'+nest+'.'
 this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
 this.css = bw.ns4?this.elm:this.elm.style
 this.doc = bw.ns4?this.elm.document:document
 this.obj = obj+'scrollerobj'; eval(this.obj+'=this')
 this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
 this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
 this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0
 this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}
//object methods...
scrollerobj.prototype.moveTo = function(x,y){
 if(x!=null){this.x=x; this.css.left=x}
 if(y!=null){this.y=y; this.css.top=y}
}
scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}


var onlineormyefile = 1;
var activePage = null;
var busy = 0;
function activate(num){
 if (activePage!=pages[num] && !busy){
  busy = 1;
  if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); }
  else if (transitionOut==1) activePage.reveal('hidden', 'activateContinue('+num+')');
 }
}
function activateContinue(num){
 busy = 1;
 activePage = pages[num];
 activePage.moveTo(0,0);
 if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; }
 else if (transitionIn==1) {
  activePage.reveal('visible', 'busy=0');
 }
 else if (transitionIn==3) { activePage.slide(0, slideAcceleration, 40, 'busy=0'); }
 startshow(num)
}

function startshow(num){
 if (num == 1) 
  { num = 2; }
 else
  if (num == 2)
   { num = 3; }
  else
   if (num == 3)
    { num = 4; }
   else
    if (num == 4)
     { num = 1; }
 setTimeout('activate('+num+')',5000);
}

scrollerobj.prototype.reveal= function(vis, fn){
 if (bw.ie5||bw.ie6 && !bw.mac) {
  if (vis=='visible') this.css.filter= 'revealTrans(duration=1,transition=23)';
  else this.css.filter= 'blendTrans(duration=1)';
  this.elm.onfilterchange = function(){ eval(fn); };
  if (vis=='visible') this.elm.filters.revealTrans.apply();
  else this.elm.filters.blendTrans.apply();
  this.css.visibility= vis;
  if (vis=='visible') this.elm.filters.revealTrans.play();
  else this.elm.filters.blendTrans.play();
 }
 else if (bw.ns6 || bw.ie&&!bw.mac){
  this.css.visibility= 'visible';
  vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);
 }
 else {
  this.css.visibility= vis;
  eval(fn);
 }
};


var pageslidefadeLoaded = 0;
function initPageSlideFade(){
 scroller1 = new scrollerobj('divScroller1');
 
 pages = new Array();
 pages[0] = null;
 for (var i=1; i<=numScrollPages; i++){
  pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');
  pages[i].moveTo(0,0);
 }
 bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6
 if (bw.ie5||bw.ie6 && !bw.mac) pages[1].css.filter= 'revealTrans(duration=1,transition=23)'; // Loads the windows 9.x filters module.
 activateContinue(1);

 //if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;
 pageslidefadeLoaded = 1;
}
if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;
</script>
<div id=divScroller1>
   <div class=dynPage id=dynPage1><%if gd1<>"" then%><a  class=b href="/<";%=gdurl1%>><%end if%><img border=0 hspace=3 vspace=3 src=http://img1.qq.com/news/20050330/1565561.jpg width="270" height="150"></a></div>
   <div class=dynPage id=dynPage2><%if gd2<>"" then%><a  class=b href="/<";%=gdurl2%>><%end if%><img border=0 hspace=3 vspace=3 src=http://img1.qq.com/news/20050330/1565562.jpg width="270" height="150"></a></div>
   <div class=dynPage id=dynPage3><%if gd3<>"" then%><a  class=b href="/<";%=gdurl3%>><%end if%><img border=0 hspace=3 vspace=3 src=http://img1.qq.com/news/20050330/1565563.jpg width="270" height="150"></a></div>
   <div class=dynPage id=dynPage4><%if gd4<>"" then%><a  class=b href="/<";%=gdurl4%>><%end if%><img border=0 hspace=3 vspace=3 src=http://img1.qq.com/news/20050330/1565564.jpg width="270" height="150"></a></div>
</div>
 
五。自动播放幻灯显示代码四：

<HTML>
  <HEAD>
    <TITLE>幻灯片播放</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb">
    <LINK HREF="Images/Style.css" REL="stylesheet">
  </HEAD>
 
<SCRIPT language="VBScript">
 
  Dim FileList,FileListArr
  FileList = "00.jpg,00.jpg,00.jpg,00.jpg,00.jpg,006.jpg,007.jpg,008.jpg"
  FileListArr = Split(FileList,",")
 
  Dim CanPlay
  CanPlay = CInt(Split(Split(navigator.appVersion,";")()," ")())>
 
  Dim FilterStr
  FilterStr = "RevealTrans(duration=,transition=)"
  FilterStr = FilterStr + ";BlendTrans(duration=)"
 
  If CanPlay Then
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Pixelate(,enabled=false,duration=,maxSquare=)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Fade(duration=,overlap=0)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.GradientWipe(duration=,gradientSize=0.,motion=forward )"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Stretch(duration=,stretchStyle=PUSH)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Wheel(duration=,spokes=6)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RandomDissolve(duration=)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Spiral(duration=,gridSizeX=0,gridSizeY=0)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.Slide(duration=,bands=,slideStyle=SWAP)"
    FilterStr = FilterStr + ";progid:DXImageTransform.Microsoft.RadialWipe(duration=,wipeStyle=CLOCK)"
  Else
    Msgbox "幻灯片播放具有多种动态图片切换效果，但此功能需要您的浏览器为IE.或以上版本，否则您将只能看到部分的切换效果。",6
  End If

  Dim FilterArr
  FilterArr = Split(FilterStr,";")

  Dim PlayImg_M
  PlayImg_M = * 000  '切换时间（毫秒）

  Dim I
  I =

  Sub ChangeImg
    Do While FileListArr(I)=""
      I = I +
      If I>UBound(FileListArr) Then I = 0
    Loop
    Dim J
    If I>UBound(FileListArr) Then I = 0
    Randomize
    J = Int(Rnd * (UBound(FilterArr)+))
    Img.style.filter = FilterArr(J)
    Img.filters(0).Apply
    Img.Src = FileListArr(I)
    Img.filters(0).play
    I = I +
    If I>UBound(FileListArr) Then I = 0
    TempImg.Src = FileListArr(I)
   
    SetTimeout "ChangeImg",PlayImg_M
  End Sub
</SCRIPT>

<BODY BGCOLOR="#000000">
<TABLE WIDTH="00%" height="00%" 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="00%" Align="Center" vAlign="Center">
      <Img ID="Img" 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
</Script>

六。文字和图片一起幻灯片特效代码：                                       

<SCRIPT LANGUAGE=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgsumm=new Array();
var adNum=0;


imgUrl[1]="http://www.webjx.com/img/200406301.jpg";
imgtext[1]="[组图]第16期 我型我塑 "
imgLink[1]="http://www.zhch.cn/";
imgsumm[1]="   摩羯座的猫猫是个安静的女孩，面对镜头总是略带羞涩。";


imgUrl[2]="http://www.webjx.com/img/200406302.jpg";
imgtext[2]="实录：”"
imgLink[2]="http://www.zhch.cn/";
imgsumm[2]="   “日子是快乐的，但后遗症却是最深的痛……";


imgUrl[3]="http://www.webjx.com/img/200406303.jpg";
imgtext[3]="家饰：[组图]我爱抱心肝宝贝"
imgLink[3]="http://www.zhch.cn/";
imgsumm[3]="   我们已经不再满足于中规中矩,四角形模样的抱枕...";


var imgPre=new Array();
var count=0;
for (i=1;i<=3;i++) {
if( (imgUrl!="") && (imgLink!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++ ;
else adNum=1;

if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=20;
imgInit.filters.revealTrans.apply();
playTran();

}
document.images.imgInit.src=imgUrl[adNum];
focustext.innerHTML=imgtext[adNum];
focussumm.innerHTML=imgsumm[adNum];
theTimer=setTimeout("nextAd()", 7000);
}


function goUrl(){
window.open(imgLink[adNum],'_blank');
}
</SCRIPT> <A TARGET=_self HREF="javascript:goUrl()"><IMG STYLE="FILTER: revealTrans(duration=1,transition=5);border-color:black;color:#000000" SRC="javascript:nextAd()" WIDTH=150 HEIGHT=200 BORDER=0 CLASS=img01 NAME=imgInit></A>
<A TARGET=_self HREF="javascript:goUrl()"><FONT COLOR=#B41A7A CLASS=sfont><SPAN ID=focustext></SPAN></FONT></A><A TARGET=_self HREF="javascript:goUrl()"><FONT COLOR=#777777 CLASS=sfont><SPAN ID=focussumm></SPAN></FONT></A>

<查看演示>

【作者: lune☆ange】【访问统计:】【2006年11月25日 星期六 03:03】【注册】【打印】

搜索
Google

Trackback

你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=5894055

回复

- 评论人：我的2008   2007-06-22 17:48:31  我的2008的博客 　

太难理解了
验证码：   
评论内容：