关于如何将轮播图在移动端和pc端自适应的操作

我用的bootstrap框架做的,轮播图代码用的bootstrap上的。
如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图，通过屏幕宽度的改变,来确定展示大图片还是小图片。

html代码

这里我将2张图片放在了自定义属性data-image中,方便操作。

<section id="main_ad" class="carousel slide" data-ride="carousel" data-interval="2200"><!-- Indicators 活动指示器--><ol class="carousel-indicators"><li data-target="#main_ad" data-slide-to="0" class="active"></li><li data-target="#main_ad" data-slide-to="1"></li><li data-target="#main_ad" data-slide-to="2"></li></ol><!-- 轮播内容容器 --><div class="carousel-inner" role="listbox"><div class="item active"  data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg"></div><div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg"></div><div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg"></div></div><!-- Controls控制切换 --><a class="left carousel-control" href="#main_ad" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#main_ad" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></section>

css代码

图片覆盖方式为cover,将整个图片铺满,定位让图片不管在pc还是移动端都能居中展示。

#main_ad > .carousel-inner > .item{height: 410px;background-repeat: no-repeat;background-position:center center;background-size:cover;
}
/*什么时候不能用410px高度*/
/*通过媒体查询的方式控制*/
/*当屏幕宽度大于768px的时候*/
@media (min-width: 768px) {#main_ad > .carousel-inner > .item{height: 410px;}
}
#main_ad > .carousel-inner > .item >img{width: 100%;background-repeat: no-repeat;background-position:center center;background-size:cover;
}

js代码

我用的jquery来写，定义了resize()方法，当屏幕宽度小于768的时候我让小图片将大图片替换掉，加trigger的原因是因为我遇到了图片开始的时候不出来，要改变宽度的时候才触发,所以加了trigger当图片一开始就触发，而不是resize的时候触发。

//让图片跟随屏幕自适应
$(function(){function resize(){var windowWidth = $(window).width();//获取屏幕的值//console.log(windowWidth);//判断屏幕大还是小var isSmallScreeen = windowWidth < 768;//根据大小为界面的每一张轮播图设置背景$('#main_ad > .carousel-inner > .item').each(function (i,item) {var $item = $(item);//因为each方法返回的是dom对象，不是jquery对象var imgSrc = $item.data(isSmallScreeen ? 'image-xs':'image-lg');$item.css('backgroundImage','url(" '+ imgSrc + '")');//因为我们需要小图尺寸等比例缩放,所以小图时我们使用img标签，更加体验友好，而不是在div里面直接backgroun:url()的方式,用url不会等比例缩放if(isSmallScreeen){$item.html('<img src="'+ imgSrc + '" alt="" />')}else{$item.empty();}})}$(window).on('resize',resize).trigger('resize');//trigger让函数自己触发一次
});

关于如何将轮播图在移动端和pc端自适应的操作相关推荐

横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图发布时间:2020-09-09 02:10:03 来源:脚本之家阅读:100 作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播 ...
置顶带滚动效果_前端面试：如何实现轮播图效果？
本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...
js轮播图按钮小案例
案列介绍我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例. 一.大概步骤注意:有很 ...
动画以及简单动画案例轮播图
我们经常见到京东,淘宝的首页中总是有轮播图出现,今天我们用简单的动画效果实现一下.先看一下animation有什么属性,看下思维导图: 动画会把我们的静态页面变得丰富有趣起来,很多页面中都有简单的动画 ...
超级简单的jquery轮播图demo
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>轮播图 ...
bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
轮播切换_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
微信小程序自定义轮播图滚动样式自定义组件轮播图的实现
效果图: 实现代码: wxml <view class="card card_b"><swiper autoplay="{{true}}" i ...
Vue轮播图插件---Vue-Awesome-Swiper
轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...
vue2.0 + vux （五）api接口封装及首页轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...

关于如何将轮播图在移动端和pc端自适应的操作

html代码

css代码

js代码

关于如何将轮播图在移动端和pc端自适应的操作相关推荐

最新文章

热门文章