微信公众平台图片轮播的快速实现
注意：1、引入jquery.js(1.7以上版本), WeixinApi.js库
2、只适用于微信播放图片
3、小图：http://121.199.20.86/dw/file/download/954b18ca-8023-48d3-b6e5-651f553f2eda.thumbs.png
大图：http://121.199.20.86/dw/file/download/954b18ca-8023-48d3-b6e5-651f553f2eda.png
你也可以用自己的大小图，建议使用网络大小图，这样可以看到loading的效果。
优点：1、代码整洁，简单，加载速度快，为微信量身打造。
2、LI_weixinImgPreview(),LI_bigImgSrc()方法已经封装好，不建议初学者自行改动。只需要在加载DOM完成后调用LI_weixinImgPreview()即可。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <script src="js/common/jquery-1.7.1.min.js"></script> <script src="js/common/WeixinApi.js"></script> </head> <body> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/954b18ca-8023-48d3-b6e5-651f553f2eda.thumbs.png"> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/7edcfc38-5a66-404a-bba2-96c3eb0e8d8d.thumbs.png"> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/4c24f6d4-8099-4697-a894-8ac7a6faafbb.thumbs.png"> </body> <script type="text/javascript"> // 调起微信客户端的图片播放组件进行播放 //7是".thumbs"的长度 $(function(){ LI_weixinImgPreview("img",7); }); /* * 微信图片轮播，调起微信客户端的图片播放组件进行播放，需要引入WeixinApi.js库 * imgTag可以是tag .class #id * otherLength是小图对应大图一般会多出标识符，如picture_small.jpg picture.jpg 则 other就是"_small"的意思，otherLength==6. 若otherLength取0，则就是原图。 * 仅用于微信 * */ function LI_weixinImgPreview(imgTag,otherLength){ WeixinApi.ready(function(Api){ var srcList = []; $.each($(imgTag),function(i,item){ if(item.src) { srcList.push(LI_bigImgSrc(item.src,otherLength)); $(item).on("touchend",function(e){ // 通过这个API就能直接调起微信客户端的图片播放组件了 Api.imagePreview(this.src,srcList); }); } }); }); } /* * 通过小图src 取得大图src * otherLength是小图对应大图一般会多出标识符，如picture_small.jpg picture.jpg 则 other就是"_small"的意思，otherLength==6. 若otherLength取0，则就是原图。 * */ function LI_bigImgSrc(src,otherLength){ var length = src.length; var endIndex = length-4-otherLength; src = src.substring(0,endIndex)+src.substring(endIndex+otherLength,length); return src; } </script> </html>
如果你还希望你的图片播放效果兼容所有浏览器，没关系，我还有办法：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link href="css/common/photoswipe.css" type="text/css" rel="stylesheet"> <link href="css/common/styles.css" type="text/css" rel="stylesheet"> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/common/klass.min.js"></script> <script src="js/common/code.photoswipe-3.0.5.min.js"></script> </head> <body> <ul id="Gallery" class="gallery"> <li> <a class="image-popup-vertical-fit" href="http://121.199.20.86/dw/file/download/954b18ca-8023-48d3-b6e5-651f553f2eda.png"> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/954b18ca-8023-48d3-b6e5-651f553f2eda.thumbs.png"> </a> </li> <li> <a class="image-popup-fit-width" href="http://121.199.20.86/dw/file/download/7edcfc38-5a66-404a-bba2-96c3eb0e8d8d.png"> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/7edcfc38-5a66-404a-bba2-96c3eb0e8d8d.thumbs.png"> </a> </li> <li> <a class="image-popup-no-margins" href="http://121.199.20.86/dw/file/download/4c24f6d4-8099-4697-a894-8ac7a6faafbb.png"> <img width="75" height="75" src="http://121.199.20.86/dw/file/download/4c24f6d4-8099-4697-a894-8ac7a6faafbb.thumbs.png"> </a> </li> </ul> </body> <script type="text/javascript"> (function(window, $, PhotoSwipe){ $(document).ready(function(){ var options = {}; $("#Gallery a").photoSwipe(options); }); }(window, window.jQuery, window.Code.PhotoSwipe)); </script> </html>
优点：1、适用各大浏览器，如果微信哪天不行了，你的网站还可以用。
缺点：1、显而易见，加载css文件，js文件非常多
