使用Bootstrap插件（Carousel）制作响应式轮播图

2023-09-21 15:42| 来源: 网络整理| 查看: 265

序言：响应式轮播图制作后不管是大于768px的非移动端还是小于768px的移动端都会加载所有资源，会导致页面的加载速度和解析效率降低对移动端极其不利。所以我们需要手写js来动态创建

原因：之所以会这样是因为图片是一个链接（后期我们点击图片会进行跳转）所以是个a标签只要页面中含有a标签就会向服务器发送请求

一、所要达到效果：

w=768px：图片做为背景，当屏幕宽度变宽的时候，会显示更多的图片的两边区域做法： 1.background-image添加图片 2.添加background-position:center center 3.background-size:cover

二、使用插件后的代码（将移动端和pc端放在一起）

每一个item就是一个轮播的图片内容 Bootstrap 101 Template .mobileImg{ width: 100%; display: block; } .mobileImg > img{ width: 100%; display: block; } .pcImg{ width: 100%; height: 410px; display: block; /*设置背景图片了*/ /*设置图片居中显示*/ background-position: center center; /*设置背景图片的大小*/ background-size: cover; } Previous Next

三、出现问题

响应式轮播图制作后不管是大于768px的非移动端还是小于768px的移动端都会加载所有资源，会导致页面的加载速度和解析效率降低对移动端极其不利。解决办法：使用js动态创建下面移动端和非移动端俩项: 创建后的结构通过data来获取路径: js代码（wjs-index.js） 1.添加子元素 item.html($('').css("backgroundImage","url('"+imgSrc+"')")); 完整js代码 $(function(){ /*获取当前所有item*/ var items=$(".carousel-inner .item"); /*监听屏幕的大小改变*/ $(window).on("resize",function(){ /*1.获取当前屏幕的宽度*/ var width=$(window).width(); /*2.判断屏幕的宽度*/ if(width>=768){/*说明非移动端*/ /*为每一个item添加子元素--遍历*/ $(items).each(function(index,value){ var item=$(this); /*当前自定义属性中存储的图片路径*/ var imgSrc=item.data("largeImage"); console.log(imgSrc); /*添加非移动端的子元素*/ item.html($('').css("backgroundImage","url('"+imgSrc+"')")); }); } else{ $(items).each(function(index,value){ var item=$(this); var imgSrc=item.data("smallImage"); item.html(''); }); } }).trigger("resize"); /*添加移动端的滑动操作*/ var startX,endX; var carousel_inner=$(".carousel-inner")[0]; /*获取当前轮播图*/ var carousel=$(".carousel"); carousel_inner.addEventListener("touchstart",function(e){ startX= e.targetTouches[0].clientX; }); carousel_inner.addEventListener("touchend",function(e){ endX= e.changedTouches[0].clientX; if(endX-startX > 0){ /*上一张*/ carousel.carousel('prev'); } else if(endX-startX width: 100%; display: block; } .mobileImg > img{ width: 100%; display: block; } .pcImg{ width: 100%; height: 410px; display: block; /*设置背景图片了*/ /*设置图片居中显示*/ background-position: center center; /*设置背景图片的大小*/ background-size: cover; } Previous Next

【本文地址】

公司简介

联系我们