幻灯片特效

原创 2016年06月02日 12:49:14

http://www.webjx.com/htmldata/2005-04-02/1112374621.html

 

 

<!-- 把下列代码加到<head>区域内 -->
<SCRIPT language=JavaScript>
var isCSS    = false;
var isW3C    = false;
var isIE4    = false;
var isNN4    = false;
var isIE6    = false;
var isGecko   = false;
var isOpera   = false;
var isDHTML   = false;
var suppressMenus = false;


function autoconfig()
{
    if(document && document.images)
    {
        isCSS  = (document.body && document.body.style) ? true : false;
        isW3C  = (isCSS && document.getElementByIdx) ? true : false;
        isIE4  = (isCSS && document.all && readIEVer() >= 4.0) ? true : false;
        isNN4  = (document.layers) ? true : false;
        isGecko  = (isCSS && navigator && navigator.product && navigator.product == "Gecko");
        isOpera  = (isCSS && navigator.userAgent.indexOf( "Opera") != -1 );
  isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
  isIE6  = ( isIE6CSS && readIEVer() >= 6.0 );
        isDHTML  = isCSS && ( isIE4 || isGecko || isOpera );
       
        if( suppressMenus || ( isOpera && readOperaVer() < 7 ) || ( isGecko && navigator.productSub <= 20011022 ) || ( isGecko && navigator.productSub == 20030107 ) )
        {
   // Opera 6.x doesn't seem to like the DHTML...
   // Netscape 6.2 puts the menus in the wrong place...
   // Safari, the menus don't go away... problem in ResetMenu
   isDHTML = false;
        }
       
    }
   
   
}


function readIEVer()
{
 var agent = navigator.userAgent;
 var offset = agent.indexOf( "MSIE" );
 if( offset < 0 )
 {
  return 0;
 }
 return parseFloat( agent.substring( offset + 5, agent.indexOf( ";", offset ) ) );
}


function montage( href, src, caption, width, animate )
{
 // this is the case for browsers that don't support filters...
 var cycle = Math.floor( Math.random() * href.length );

 // switch off animation if we're not on broadband
 var m_montage = ( typeof(animate) != "undefined" ? animate : hasBroadband() );
 
 if( m_montage == false || src.length <= 1 || !( isIE4 || isW3C ) )
 {
  montagePicker( href, src, caption, cycle );
  return;
 }
 
 // go build all of the nested DIVs out
 monIdx  = cycle;

 document.writeln( "<div id=\"container\" style=\"width:" + width +"px;height:112px\">" );

 for( i = 0; i < src.length; i++ )
 {
  // set up a placeholder
  document.writeln( "\t<div id=\"montage" + i + "\" style=\"display:none\">" );
  
  montagePicker( href, src, caption, i );

  document.writeln( "\t</div>" );
 }

 document.writeln( "</div>" );

 // pull the images out
 monBlock = new Array( src.length );
 monImg  = new Array( src.length );

 for( i = 0; i < src.length; i++ )
 {
  monBlock[i] = document.getElementByIdx( "montage" + i ).style;
  monImg[i] = document.getElementByIdx( "monimg" + i );
  
  if( monImg[i] == null )
  {
   montagePicker( href, src, caption, i );
   return;
  }
 // alert( "foo" );
 }

 monContainer = document.getElementByIdx("container");
 
 montageEffects();
}

function montageEffects()
{
 var nextImage = (monIdx + 1) % monImg.length;
 
 // run the transition
 if( readIEVer() >= 4.0 )
 {
  monContainer.style.filter = "blendTrans(duration=1.5) revealTrans(duration=1.0,transition=7)";
 
  monContainer.filters(0).apply();
  monContainer.filters(1).apply();
  
   montageSelect( nextImage );
  
  monContainer.filters(0).play();
  monContainer.filters(1).play();
 }
 else
 {
  montageSelect( nextImage );
 }

 // asked to be called again a little later
 setTimeout( "montageSwap()", monTimeout );
}

function montageSelect( nextImage )
{
 //alert( monImg[monIdx].style.visibility );
 monBlock[monIdx].display = "none";
 monIdx = nextImage;
 monBlock[monIdx].display = "block";
}  

function montageSwap()
{
 if( monImg[monIdx].complete )
 {
  // move the image index along
  montageEffects();
 }
 else
 {
  // check again 3 seconds later
  setTimeout( "montageSwap()", 3000 );
 }
}

function montagePicker( href, src, caption, cycle )
{
 if( href[cycle] != null )
 {
  document.writeln( "\t\t<A HREF=\"" + href[cycle] + "\"><IMG SRC=\"" + src[cycle] + "\" alt=\"" + caption[cycle] + "\" BORDER=\"0\" ID=\"monimg" + cycle + "\"></a>" );
 }
 else
 {
  document.writeln( "\t\t<IMG SRC=\"" + src[cycle] + "\" ID=\"monimg" + cycle + "\">" );
 }
}

function hasBroadband()
{
 if( readIEVer() < 5.0 )
 {
  return false;
 }
 
 try
 {
  document.body.addBehavior ("#default#clientCaps");
 
  return ( typeof(document.body.connectionType) != "undefined" && document.body.connectionType == "lan" );
 }
 catch( e )
 {
  return false;
 }
}
//more javascript from http://www.webjx.com
</SCRIPT>

<!-- 把下列代码加到<body>区域内 -->

<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=122>
<SCRIPT language=JavaScript type=text/javascript>
autoconfig();
monTimeout = 2000;
var urls = new Array();
var imgs = new Array();
var caps = new Array();
urls[0] = "http://www.webjx.com";
imgs[0] = "/img/200406301.jpg";
caps[0] = "说明一";
urls[1] = "http://www.webjx.com";
imgs[1] = "/img/200406302.jpg";
caps[1] = "说明二";
urls[2] = "http://www.webjx.com";
imgs[2] = "/img/200406303.jpg";
caps[2] = "说明三";
urls[3] = "http://www.webjx.com";
imgs[3] = "/img/200406304.jpg";
caps[3] = "说明四";
urls[4] = "http://www.webjx.com";
imgs[4] = "/img/200406305.jpg";
caps[4] = "说明五";
montage( urls, imgs, caps, 461 );
</SCRIPT>
</TD></TR>
</TBODY></TABLE>

版权声明:本文为博主原创文章,未经博主允许不得转载。

swiper滑动实现幻灯片功能及swiper animate的动画特效

怎么实现手机滑动实现幻灯效果呢?目前网上有很多插件可以实现,本人选了一款非常不错的插件swiper.js,原因有很多,当然这款插件最符合项目的需要。所以在此推荐给大家。             那么在...

【移动开发】Ken Burns特效的幻灯片

Ken Burns特效,是视频产品中使用的一种平移和缩放的静态图片的特效。 先看维基百科针对Ken Burns特效的介绍。 http://en.wikipedia.org/wiki/Ken_Burns...
  • manoel
  • manoel
  • 2014年09月10日 00:19
  • 31163

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

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

jquery特效 幻灯片效果

网站常用jquery效果,各种焦点图滚动效果,jquery学习

android 开发技巧(7)--附加 Ken Burns 特效的幻灯片

Ken Burns 特效是视频产品中使用的一种平移和缩放静态图片的 特效 完成这个效果,需要第三方jar,这个可以在资源jar上下载public class Hack08Activity exte...

附加Ken Burns特效的幻灯片

Ken Burns特效只不过是视频产品中使用的一种平移和缩放静态图片的特效。:要实现上述功能,需要使用Jake Wharton开发的Nine Old Androids库。这个库可以让开发者在旧版本上使...

Ken Burns特效的幻灯片

本文翻译自《50 android hacks》 Ken Burns特效,是视频产品中使用的一种平移和缩放的静态图片的特效。 先看维基百科针对Ken Burns特效的介绍。 htt...

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

jquery图片特效slider插件 @charset "utf-8"; .jquery-slider-wrapper{position:relative;zoom:1;clear:both} .j...

幻灯片JavaScript特效展示

效果图: 示例代码: 幻灯片js特效展示 *{ margin:0; padding:0;} img{border:none;} .huandeng{width:704px; hei...

10个不错的jquery幻灯片特效

WEB前端开发网站的作品,其中有免费的也有付费的,效果都相当不错,用来整合到网站里做个幻灯片内容模块再合适不过了。好了,开场白就到这里,插件详情见下面。还是老规矩,最近主机空间吃紧,所以这种可有可无的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:幻灯片特效
举报原因:
原因补充:

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