今日头条

<!--今日头条 S-->
<div class="hot-news-scroll clearfix">

</div>
<!--今日头条 E-->
<script id="top-news-tem" type="text/html">
    <div class="news-tit fl"><img src="<?=Url::to('@web/h5-assets/images/common/hot-news-icon.png')?>"/></div>
    <div class="news-scroll-bd fl">
        <ul>
            <%for(var x in data.top_news) {%>
            <li>
                <a href="<%=data.top_news[x].url%>">
                    <dl>
                        <dt><%=data.top_news[x].name%></dt>
                        <dd><%=data.top_news[x].content ? data.top_news[x].content.abstract : ''%></dd>
                    </dl>
                </a>
            </li>
            <%}%>
        </ul>
    </div>
    <div class="news-scroll-hd">
        <ul></ul>
    </div>
</script>
<script>
$(function () {
    var url = '/rest-api/get-home-elements';
    $.ajax({
        type: 'get',
        url: url,
        dataType: 'json',
        success: function (res) {
             var hot_news_html = template('top-news-tem', res);
             $('.hot-news-scroll').html(hot_news_html);
             
             //http://www.superslide2.com/downLoad.html
             //http://www.superslide2.com/param.html
             if (res.data.top_news.length > 0) {
                    jQuery(".hot-news-scroll").slide({
                        titCell: ".news-scroll-hd ul",  //导航元素对象（鼠标的触发元素对象）
                        mainCell: ".news-scroll-bd ul", //切换元素的包裹层对象
                        autoPage: true,
                        effect: "topLoop",  //动画效果
                        /****************************************
                        [v1.0] fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
                        [v2.0] fold：淡入淡出
                        [v2.1] slideDown：下拉效果
                        ****************************************/
                        autoPlay: true,     //自动运行
                        vis: 1              //visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。
                    });
             }
        }
   });
});
</script>

 

转载于:https://www.cnblogs.com/zouke1220/p/8203800.html