热门关键字:
jquery > jquery教程 > jquery教程 > jQuery响应式轮播图插件edslider

jQuery响应式轮播图插件edslider

343
作者:管理员
发布时间:2021/1/25 15:43:11
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3429
(function($, undefined) {
    $.fn.lazyload = function (options) {      
        return this;
    };
    $.inScreen = function (e) {
        return this;
    }
})(jQuery, undefined);
$(function(){
    var resourceUrl='//cdn3.maxuscloud.com/r/cms'
    var url = resourceUrl+"/pc/img/newhome/wx-lazy.jpg";
    $('.mySlideshow').edslider({
        width : '100%',
        height: 500,
        progress:false,
        interval:25
    });
});
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="//cdn3.maxuscloud.com/r/cms/pc/css/newhome/elastislide.css">
<link rel="stylesheet" type="text/css" href="//cdn3.maxuscloud.com/r/cms/pc/css/newhome/edslider.css">
<script src="//cdn3.maxuscloud.com/r/cms/pc/framework/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<ul class="mySlideshow" style="width: 100%; height: 500px; background-image: none; background-repeat: no-repeat; background-position: center center;">
    <li class="current" style="height: 500px; width: 100%; display: list-item;"><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/93/f/201709271156500902502.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/93/f/201709271156500902502.jpg" style="width: 100%; height: 100%;"></li>
    <li style="height: 500px; width: 100%; display: none;" class=""><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/69/bb/201709251728059033801.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/69/bb/201709251728059033801.jpg" style="width: 100%; height: 100%;"></li>
    <li style="height: 500px; width: 100%; display: list-item;" class=""><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/ca/93/201709251717024198302.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/ca/93/201709251717024198302.jpg" style="width: 100%; height: 100%;"></li>
    <li style="height: 500px; width: 100%; display: list-item;" class=""><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/dc/61/201709211038349445956.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/dc/61/201709211038349445956.jpg" style="width: 100%; height: 100%;"></li>
    <li style="height: 500px; width: 100%; display: none;" class=""><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/77/6c/201708181429231701911.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/77/6c/201708181429231701911.jpg" style="width: 100%; height: 100%;"></li>
    <li style="height: 500px; width: 100%; display: none;" class=""><img src="https://cdn3.maxuscloud.com/wxc2b/upload/cms/c8/24/201708171818135293268.jpg" class="lazy" data-original="https://cdn3.maxuscloud.com/wxc2b/upload/cms/c8/24/201708171818135293268.jpg" style="width: 100%; height: 100%;"></li>
</ul>
<script src="//cdn3.maxuscloud.com/r/cms/pc/js/newhome/jquery.edslider.js"></script>
<script type="text/javascript" src="newIndex.js"></script>





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐