pixviewer图片轮播效果（jQuery客户端与服务端相分离）

废话不多说，直接上代码：

<! DOCTYPE HTML >
< html  lang ="en-US" >
< head >
     < meta  charset ="UTF-8" >
     < title ></ title >
< script  type ="text/javascript"  src ="http://lib.sinaapp.com/js/jquery/1.6.2/jquery.min.js" ></ script >
< script > ! window.jQuery  &&  document.write( ' <script  src="script/jquery-1.6.2.min.js"><\/script> ' ) </ script >
< script  type ="text/javascript" >
$(document).ready( function  () {
     /* ****************** 
    Author:Gino_wang
    blog:http://www.cnblogs.com/wangzhichao
    
    source：flash地址,默认地址为 images/pixviewer.swf;
    focus_width：flash图片宽度，默认为第一张图片的宽度;
    focus_height:flash图片高度，默认为第一张图片的高度;
    text_height:文本高度,默认为0。
    
    ******************* */

$.fn.extend({
    pixviewer: function  (source,focus_width,focus_height,text_height) {
         var  images  =  $( this ).find( " img " ),
            imgUrls  = "" ,links  =   "" ,texts  =   "" ;
        source  =  source  ||   " images/pixviewer.swf " ;
        focus_width  =  focus_width  ||  images.eq( 0 ).width();
        focus_height  =  focus_height  ||  images.eq( 0 ).height();
        text_height  =  text_height  ||   0 ;
        swf_height  =  focus_height  +  text_height;
         var  i;
         for  (i  =   0 ;i  <  images.length; i ++ ) {
            imgUrls  +=  images.eq(i).attr( " src " )  +   " | " ;
            links  +=  $( this ).find( " a " ).eq(i).attr( " href " )  +   " | " ;
            texts  +=  images.eq(i).attr( " alt " )  +   " | " ;
        }
        imgUrls  =  imgUrls.replace( / (.*)[|]$ / , " $1 " );
        links  =  links.replace( / (.*)[|]$ / , " $1 " );
        texts  =  texts.replace( / (.*)[|]$ / , " $1 " );         
        flash  =   ' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width=" ' +  focus_width  + ' " height=" ' +  swf_height  + ' "><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="Images/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0"><param name="menu" value="false"><param name=wmode value="opaque"><param name="FlashVars" value="pics= ' + imgUrls + ' &links= ' + links + ' &texts= ' + texts + ' &borderwidth= ' + focus_width + ' &borderheight= ' + focus_height + ' &textheight= ' + text_height + ' "><embed src="Images/pixviewer.swf" wmode="opaque" FlashVars="pics= ' + imgUrls + ' &links= ' + links + ' &texts= ' + '' + ' &borderwidth= ' + focus_width + ' &borderheight= ' + focus_height + ' &textheight= ' + text_height + ' " menu="false" bgcolor="#F0F0F0" quality="high" width=" ' +  focus_width  + ' " height=" ' +  focus_height  + ' " allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object> ' ;
         if  ( / ^.+[|].+ / .test(imgUrls)){
            $( this ).html(flash);
        } else {
            $( this ).html( " 图片没有被正确调用 " );
        }
    }
});

$( " #banner " ).pixviewer();
})

</ script >
</ head >
< body >
< div  id ="banner"   >
     < a  href ="http://www.zbyzf.com" >< img  src ="http://www.zbyzf.com:4047/uploadfiles/20121113/20121113135922102210.jpg"  alt ="banner4" /></ a >
     < a  href ="http://www.zbyzf.com" >< img  src ="http://www.zbyzf.com:4047/uploadfiles/20121113/20121113135955945594.jpg"  alt ="banner3" /></ a >
     < a  href ="http://www.zbyzf.com" >< img  src ="http://www.zbyzf.com:4047/uploadfiles/20121113/20121113135852905290.jpg"  alt ="banner2" /></ a >
</ div >
</ body >
</ html >

 

 Demo中含有pixviewer源文件，可以DIY您的flash文件。

Demo下载：pixviewerForJQuery

转载于:https://www.cnblogs.com/ginowang42/archive/2012/12/03/2798994.html