可在服务端设置轮播图片的前端html5实现方法

一.使用方法       

在前端web页面开发中，轮播图片是一个经常需要使用到的功能，比如APP首页顶部的轮播图、淘宝商品页顶部的轮播图。

在我做的心愿漂流瓶项目中，我使用swiper.js这个插件实现了固定图片的轮播显示。图片如下图1所示。项目地址：心愿漂流瓶。

后来客户要求轮播图片能够在后台设置，于是我添加了这个功能，实现方法如下。需要注意的是，需要在html页面中搭好框架，然后在js代码中，要先从服务器上获取到图片列表，然后使用函数"formatSliders()"格式化图片列表，添加到“swiper-wrapper”元素中，这些工作做完后，再初始化swiper。

html代码如下：

js代码如下：

var sliders = getSliderLists();
    formatSliders(sliders);
    //Initialize Swiper
    var swiper = new Swiper('.swiper-container', {
        pagination: '.pagination',
        paginationClickable: true,
        autoplay:2500							// 自动播放的速度
    });

function getSliderLists(){
    var sliders;
    $.ajax({
        url: serverPrefix + "/driftingbottle/slider/list",
        type: "get",
        dataType: "json",
        async: false,
        success: function(data){
            if (data.code == 0){
                sliders = data.result.sliders;
            }
        }
    });
    return sliders;
}

function formatSliders(sliders){
    var template;
    var html = "";
    template  = '
';
    template += '   ';
    template += '       ';
    template += '   ';
    template += '
';
    $(sliders).each(function(i){
        sliders[i].url = imagesPrefix + sliders[i].url;
        html += template.formatString(sliders[i]);
    });
    $(".swiper-wrapper").html(html);
}

二. 轮播图失效的问题

      在我做的另外一个项目中，按照上面同样的方法，轮播图失效。具体使用场景是初始时轮播图默认是“display:none;”，然后在点击菜单栏“点播”按钮时，才会显示出来，如下图所示：

       后来花了几个小时的时间，才解决这个问题，估计是隐藏后再显示对轮播图有影响，具体的原因我也没有弄明白，解决的办法是每次轮播图显示的时候，js代码中都对swiper重新初始化一次，代码如下：

$(".top-menu").on('click', 'li', function () {
        var $this = $(this);
        var $cur = $('.top-menu').find('li.on');
        $cur.add($($cur.data('target'))).removeClass('on');
        $this.add($($this.data('target'))).addClass('on');
        if ($this.attr("id") === "live-broadcast-nav") {
            position = "liveBroadcast";
        }
        else if ($this.attr("id") === "request-broadcast-nav") {
            position = "requestBroadcast";
            if (typeof(window.requestBroadcastNavClicked) == "undefined") {     // 只执行该代码一次
                addFirstPageRequestBroadcastList();
                window.requestBroadcastNavClicked = true;
            }
            var swiper = new Swiper('.swiper-container', {      // swiper显示后才能初始化，否则轮播不正常
                pagination: '.pagination',
                paginationClickable: true,
                autoplay:5000,							// 自动播放的速度
            });
        }
    });