您的位置：首页 > Web前端 > JQuery

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

2012-12-03 08:35 411 查看

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

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航