网页和移动端自适应的轮播图（运用bootstrap）网页和移动端自适应的轮播图

首先要引入bootstrap的文件，自行下载

html

文章图片文章图片文章图片文章图片

css

/*轮播图*/ .pc_imgBox{ display: block; height: 400px; width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .m_imgBox{ display: block; width: 100%; } .m_imgBox img{ display: block; width: 100%; }

data.json

[ { "pcUrl":"images/slide_01_2000x410.jpg", "mUrl":"images/slide_01_640x340.jpg" }, { "pcUrl":"images/slide_01_2000x410.jpg", "mUrl":"images/slide_01_640x340.jpg" }, { "pcUrl":"images/slide_02_2000x410.jpg", "mUrl":"images/slide_02_640x340.jpg" }, { "pcUrl":"images/slide_03_2000x410.jpg", "mUrl":"images/slide_03_640x340.jpg" }, { "pcUrl":"images/slide_04_2000x410.jpg", "mUrl":"images/slide_04_640x340.jpg" } ]

index.js

/** * Created by XLS on 2019/5/22. */ $(function () { /*动态轮播图*/ banner(); }); var banner = function () { /*1.获取轮播图数据ajax */ /*2.根据数据动态渲染根据当前设备屏幕宽度判断 */ /*2.1 准备数据*/ /*2.2 把数据转换成html格式的字符串（动态创建元素，字符串拼接，模版引擎【artTemplate】*/ /*2.3 把字符渲染页面当中*/ /*3.测试功能页面尺寸发生改变重新渲染*/ /*4.移动端手势切换touch*//*ui框架：bootstrap,妹子UI,jqueryUI,easyUI,jqueryMobile,mui,framework7*/ /*关于移动端的UI框架：bootstrap,jqueryMobile,mui,framework7*/ /*模板引擎：artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore*//*做数据缓存*/ var getData = https://www.it610.com/article/function (callback) { /*缓存了数据*/ if(window.data){ callback && callback(window.data); }else { /*1.获取轮播图数据*/ $.ajax({ type:'get', url:'js/data.json', /*强制转换后台返回的数据为json对象*/ /*强制转换不成功程序报错，不会执行success,执行error回调*/ dataType:'json', data:'', success:function (data) { window.data = https://www.it610.com/article/data; callback && callback(window.data); } }); } } var render = function () { getData(function (data) { /*2.根据数据动态渲染根据当前设备屏幕宽度判断 */ var isMobile = $(window).width() < 768 ? true : false; //console.log(isMobile); /*2.1 准备数据*/ /*2.2 把数据转换成html格式的字符串*/ /*使用模版引擎：那些html静态内容需要编程动态的*/ /*发现：点容器图片容器新建模版*/ /*开始使用*/ /* 模版引擎内不可使用外部变量 */ var pointHtml = template('pointTemplate',{list:data}); //console.log(pointHtml); var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile}); //console.log(imageHtml); /*2.3 把字符渲染页面当中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml); }); } /*3.测试功能页面尺寸发生改变事件*/ $(window).on('resize',function () { render(); /*通过js主动触发某个事件*/ }).trigger('resize'); /*4.移动端手势切换*/ var startX = 0; var distanceX = 0; var isMove = false; /*originalEvent 代表js原生事件*/ $('.wjs_banner').on('touchstart',function (e) { startX = e.originalEvent.touches[0].clientX; }).on('touchmove',function (e) { var moveX = e.originalEvent.touches[0].clientX; distanceX = moveX - startX; isMove = true; }).on('touchend',function (e) { /*距离足够 50px 一定要滑动过*/ if(isMove && Math.abs(distanceX) > 50){ /*手势*/ /*左滑手势*/ if(distanceX < 0){ //console.log('next'); $('.carousel').carousel('next'); } /*右滑手势*/ else { //console.log('prev'); $('.carousel').carousel('prev'); } } startX = 0; distanceX = 0; isMove = false; }); }

【网页和移动端自适应的轮播图（运用bootstrap）】显示效果