没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
1、bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说。 2、修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载。 图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图做不到等比例缩放)。 承载轮播图的盒子高度:大图的的时候用图片的高度,小图自适应,所以要用到媒体查询,设置容器高度。 3、代码 <sec
资源推荐
资源详情
资源评论
使用使用BootStrap建立响应式网页建立响应式网页——通栏轮播图(通栏轮播图(carousel))
1、、bootstrap提供了提供了js插件插件——轮播图轮播图
我们还是照旧,直接拿过来用,需要改的地方再说。
2、修改、修改
小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg(保存大图)和data-img-xs(保存小
图)属性保存图片的路径,利用jQuery的data函数取出data-xxxx属性进行动态加载。
图片居中显示:大图用背景图片来做比较好一点,小图用img来做比较好一点(因为小图的话需要等比例缩放,用背景图
做不到等比例缩放)。
承载轮播图的盒子高度:大图的的时候用图片的高度,小图自适应,所以要用到媒体查询,设置容器高度。
3、代码、代码
<section id="banner" class="carousel slide" data-ride="carousel">
<!--小圆点 -->
<ol class="carousel-indicators">
<li data-target="#banner" data-slide-to="0" class="active"></li>
<li data-target="#banner" data-slide-to="1"></li>
<li data-target="#banner" data-slide-to="2"></li>
<li data-target="#banner" data-slide-to="3"></li>
</ol>
<!-- 轮播图片 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-img-lg="img/slide_01_2000x410.jpg" data-img-xs="img/slide_01_640x340.jpg">
</div>
<div class="item" data-img-lg="img/slide_02_2000x410.jpg" data-img-xs="img/slide_02_640x340.jpg">
</div>
<div class="item" data-img-lg="img/slide_03_2000x410.jpg" data-img-xs="img/slide_03_640x340.jpg">
</div>
<div class="item" data-img-lg="img/slide_04_2000x410.jpg" data-img-xs="img/slide_04_640x340.jpg">
</div>
</div>
<!-- 左右轮播 -->
<a class="left carousel-control" href="#banner" 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="#banner" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</section>
<script type="text/javascript">
$(function() {
//获取屏幕宽度
// var screenWidth=$(window).width();
//判断是不是手机屏幕
// if(screenWidth<768){//手机屏幕
// $("#banner .carousel-inner .item").each(function(index,item){
// var $item=$(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
// $item.css("background-image","url("+$item.data('img-xs')+")");
// });
// }else{//大屏幕
// $("#banner .carousel-inner .item").each(function(index,item){
// var $item=$(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
// $item.css("background-image",'url('+$item.data('img-lg')+')');
// });
// }
//三元式
// var isPhone=screenWidth<768;
// $("#banner .carousel-inner .item").each(function(index,item){
// var $item = $(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
// $item.css("background-image","url("+$item.data(isPhone?'img-xs':'img-lg')+")");
// });
function selectImg(){
var screenWidth=$(window).width();
var isPhone=screenWidth<768;
$("#banner .carousel-inner .item").each(function(index,item){
var $item = $(item);//因为传递的item是dom对象,要把dom对象改为jQuery对象
$item.css("background-image",'url('+$item.data(isPhone?'img-xs':'img-lg')+')');
资源评论
weixin_38619967
- 粉丝: 5
- 资源: 928
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 案例12 SVM神经网络的数据分类预测-葡萄酒种类识别.zip
- 动态ListView,支持异步更新列表,异步更新图片.zip
- GoogleCamera_v9.2.113_danji100.com.apk
- vb题库管理系统设计(源代码+论文).rar
- [信息办公]PHP Classifieds v7.3_classifieds.rar
- 基于matlab实现智能反射面
- fillblank_1.py
- [检测统计]北雨访问记数器系统_bycount.rar
- UFS FW开发,FTL算法,WL策略
- HonoCMS 内容发布系统 v1.0_honocms_cn_CMS程序开发模板(使用说明+源代码+html).zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功