jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件

2019独角兽企业重金招聘Python工程师标准>>>

今天写了一下午带晚上的jQuery/Zepto的Bootstrap轮播图插件,功能是能够根据当前较短的一边实现自适应宽度,并且居中显示图片,基本可以解决多数bootstrap轮播图的居中问题,类样式都是bootstrap的class原生类,并未自定义。

代码块:

 $.fn.extend({ //Jquery/Zepto图片宽高自适应插件imgSizeAuto: function(){console.log("sizeAuto")this.each(function(i,e){var imgTmp=document.createElement("img")$(imgTmp).attr({"src":$(e).attr("src")})$("body").append(imgTmp)if(e.width>=e.height){imgTmp.height=$(".item.active").height()e.style.height=$(".item.active").height()+"px"if(imgTmp.width<$(".item.active").width()){//判断被压缩后的宽度是否是小于了容器的宽度,如果小于,则宽也自适应$(e).width($(".item.active").width())}else{$(e).css({marginLeft:-imgTmp.width/2+$(".item.active").width()+"px",left:"50%"})}}else{imgTmp.width=$(".item.active").width()e.style.width=$(".item.active").width()+"px"if(imgTmp.height<$(".item.active").height()){//判断被压缩后的高度是否是小于了容器的宽度,如果小于,则高也自适应$(e).height($(".item.active").height())}else{$(e).css({marginTop:-imgTmp.height/2+$(".item.active").height()/2+"px",top:"50%"})}}$(imgTmp).remove()})}})

转载于:https://my.oschina.net/jamesview/blog/751884

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件相关推荐

解决v-for轮播图中图片无法显示
v-fo中src拿不到img的地址,图片无法显示 view可以打印出list.data中的img值,说明数组没问题,已经拿到图片值: 将src直接赋值地址,有图片显示,那么就是src没有拿到图片地址: ...
解决bootstrap轮播图因为图片尺寸造成的问题
发现问题在使用bootstrap做轮播图时,由于图片尺寸,使得图片与轮播图结合的效果很差解决方案我们先找到轮播图的相关代码,如下: <div id="carousel ...
html中轮播图中图片样式如何调,纯CSS3做轮播图基础样式设置
一,准备工作轮播图的主要遇新是直朋能到分览思想: 1,让友,记基开前不接些前家我告对猿果水使钮控轮播的几张图片横向连成一片,默认是从上到下(如果图片像朋支不器几事为的时后级功发发来久都这样含制层是请 ...
bootstrap轮播图怎么居中
bootstrap的轮播图代码直接用不修改的话, 容易出现以下情况: 很多人的解决办法就是把图片宽度设置为100%,但如果仅仅只是将图片设置为100%,则容易出现如下情况,整个轮播图填充了大部分页面, ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
html全屏轮播图插件,jQuery全屏3D轮播图插件
jQuery.PageScroll3D是一款jQuery全屏3D轮播图插件.该jquery轮播图插件采用响应式设计,可以在垂直方向上制作出类似立方体滚动的3d轮播图效果. 使用方法在页面中引入jqu ...
bootstrap实现轮播图 --设置图片大小等于父容器大小
运行前需要首先引入bootstrap 和jquery文件并修改图片路径 <!DOCTYPE html> <html><head><meta charset=& ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件

jQuery/Zepto的Bootstrap轮播图中图片自适应宽高并居中插件相关推荐

最新文章

热门文章