您的位置:首页 > Web前端 > JQuery

jquery jquery插件infinite scroll <%each list as goods%> 模板 产品循环

2016-04-01 23:19 477 查看
    <p class="index-title padding-all text-c">猜你喜欢</p>

    <section class="product-list j-product-list product-list-medium" data="1">
<script id="j-product" type="text/html">
<ul>
<%each list as goods%>
<li>
<div class="product-div">
<a class="product-div-link" href="<%goods.url%>"></a>
<img class="product-list-img" src="<%goods.goods_thumb%>" />
<div class="product-text">

                        <h4><%goods.goods_name%></h4>

                        <p><span class="p-price t-first "><%if goods.is_promote > 0%><%goods.promote_price%><%else%><%goods.shop_price%><%/if%><small></small></span></p>

                        <a href="javascript:void(0)" class="icon-flow-cart fr j-goods-attr"><i class="iconfont icon-gouwuche"></i></a>

                    </div>
</div>
</li>
<%/each%>
</ul>
</script>

    </section>

<!-- jquery-ui-1.10.1.custom.min.js和jquery.ui.touch-punch.min.js使jquery 拥有手机touch事件-->

<script src="{__TPL__}js/jquery-ui-1.10.1.custom.min.js " type="text/javascript "></script>

<script src="{__TPL__}js/jquery.ui.touch-punch.min.js "></script>

<script type="text/javascript" src="{__PUBLIC__}script/jquery.infinite.js"></script>

<script type="text/javascript" src="{__PUBLIC__}script/template.js"></script>

<!--script for this page only-->

<script type="text/javascript " src="{__TPL__}js/jquery.scrollUp.min.js "></script>

<script type="text/javascript ">

    $(function($) {

        var mySwiper = new Swiper('.banner-first', {

            autoplay: 4000,

            pagination: '.banner-first-pagination'

        });

        var mySwiper = new Swiper('.banner-second', {

            autoplay: 5000,

            pagination: '.banner-second-pagination'

        });

        var mySwiper = new Swiper('.banner-third', {

            autoplay: 5000,

            pagination: '.banner-third-pagination'

        });

        var mySwiper = new Swiper('.recom-container', {

            pagination: '.recom-pagination',

            slidesPerView: 1,

            paginationClickable: true

        });

        var mySwiper = new Swiper('.brand-container', {

            pagination: '.brand-pagination',

            slidesPerView: 1,

            paginationClickable: true

        });

        var mySwiper = new Swiper('.hot-container', {

            slidesPerView: 4,

            paginationClickable: true,

            nextButton: '.swiper-button-next',

            prevButton: '.swiper-button-prev'

        });

    });
var url = "{U('async_list')}";
$('.product-list').infinite({url: url, template:'j-product'});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: