如何设置通过给定API获得的图像的自动图像滑块

时间:2017-05-24 07:45:26

标签: javascript jquery json wordpress web

如何设置通过给定API获得的图像的自动图像滑块。

以下是我唯一只显示一张图片的代码。

请建议我能解决的问题。感谢

jQuery(function(){

loadDD();

function loadDD(date){
    var mandir="perth";
    var ddLink = "http://dd.bhujmandir.org/index.php?output=json&mandir=" + mandir;
    var qryDate = getParameterByName("date");

    var jsonLink = ddLink;

    if (qryDate)
        jsonLink = ddLink + "&date=" + qryDate;

    jQuery("#cloudDarshan").css({opacity:0.3});
    jQuery.get(jsonLink, {}, function(data){
        var jsonData = jQuery.parseJSON(data);
        var template = '<style type="text/css"> .dd-row {margin-bottom: 15px;}</style><h3 class="pull-centre"><#= curNiceDate #></h3>   <# for (var i = 3; i < images.length; i++) {var imageSrc = images[i];   #>  <# if (i != 0 && i % 5 == 0) { #>       </div>      <div class="row dd-row">    <# } #>     <div class="col-md-6"><img style="margin-top:5px; padding:2px; border: 1px solid #E4E8FF; width:100%" src="http://dd.bhujmandir.org/<#= images[i]#>"></img><class="img-thumbnail" />        </div>  <# } #></div></div></div><div class="clearfix"></div>'
        var htmlText = tmpl(template, jsonData);
        jQuery("#cloudDarshan").html(htmlText).css({opacity:1});            
    });
}

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// micro template engine
var _tmplCache = {}
var tmpl = function (str, data) {
    var err = "";
    try {
        var func = _tmplCache[str];
        if (!func) {
            var strFunc = "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
            str.replace(/[\r\t\n]/g, " ")
            .replace(/'(?=[^#]*#>)/g, "\t")
            .split("'")
            .join("\\'")
            .split("\t")
            .join("'")
            .replace(/<#=(.+?)#>/g, "',$1,'")
            .split("<#")
            .join("');")
            .split("#>")
            .join("p.push('") +
            "');}return p.join('');";

            func = new Function("obj", strFunc);
            _tmplCache[str] = func;
        }
        return func(data);
    }
    catch (e) {
        err = e.message;
    }
    return "[ERROR: " + err + "]";
}

});

1 个答案:

答案 0 :(得分:1)

将图像绑定到Pageviewer并使用下面的代码使图像自动滑动

var timer = new System.Timers.Timer();
timer.Interval = 1000;
timer.Enabled = true;
int page = 0;
timer.Elapsed += (sender, args) =>
{
    RunOnUiThread(() =>
    {
        if (page <= viewPager.Adapter.Count)
        {
            page++;
        }
        else
        {
            page = 0;
        }
        viewPager.SetCurrentItem(page, true);
        Log.WriteLine(LogPriority.Debug, "CurrentItem:", viewPager.CurrentItem.ToString());
    });
};