技术文章分类(180)

技术随笔(11)

微信公众平台图片轮播的快速实现

 

注意: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文件非常多

posted @ 2014-05-04 10:55  坤哥MartinLi  阅读(2363)  评论(0编辑  收藏  举报