今日头条
<!--今日头条 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>