# 1、轮播图 轮播图数据展示 1.向服务器端发送请求索要轮播图数据 2.使用模板引擎将数据和HTML字符串进行拼接,将拼接好的内容显示在页面中 3.将原有的实现轮播图效果的JavaScript代码挪到ajax方法的success函数的最后面 获取轮播图数据接口  html ~~~ <script src=" assets/vendors/ art-template/ template-web. js"></script> <!--轮播图模板--> <script type=" text/html" id="slidesTpl"> {{each data}} <li> <a href=" /detail.html?id={ {$value.link}}"> <img src="{ {$value. image}}"> <span>{{$value. title}}</span> </a> </ li> {{/each}} </script> ~~~ js ~~~ //先服务器端发送请求，索要轮播图数据 $.ajax({ type:'get' , url :'/slides ', success: function (response) { console.log( response ) var html = template( ' slidesTpl', {data: response}); $( ' #slidesBox' ).html (html ) // var swiper = Swipe( document . querySelector(' .swipe'), { auto: 3000 ， transitionEnd: function (index) { // index++ ; $(' .cursor span') .eq(index).addClass( ' active').siblings } }); //上/下一张 $(' .swipe .arrow' ) .on( 'click', function () { var_ this = $(this); if(_ this.is(' .prev')) { swiper 。prev(); } else if(_ this.is(' .next')) { swiper .next( ); } }) ~~~