求大神解答 用bootstrap是什么写的轮播 如何能将

来源：蜘蛛抓取(WebSpider) 时间：2018-07-15 12:00 标签： bootstrap教程
其他回答(1)
& &你可以参考下我的Bootstrap轮播示例
园豆：1012
园豆：1012
我就用的这段代码，你可以直接复制，然后把css和js文件路径进行修正试试，记得用高版本的浏览器。
园豆：1012
园豆：1012
园豆：1012
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。为了账号安全，请及时绑定邮箱和手机
bootstrap的轮播图怎么实现响应式？
今天试了一天，怎么才能将bootstrap的轮播图怎么实现响应式？就是随着浏览器的缩小轮播图也成比例缩小呢？求指点！比如这个网站的那个轮播图就能很好的自适应，随着浏览器的大小改动也可以改动http://demo.wpcom.cn/third/
&div class="container"&
&div class="row"&
&div class="col-md-12"&轮播图内容&/div&
你还没有登录，请先登录或注册慕课网帐号
轮播图的img就是自适应的，具体是设置img的max-width为100%;.carousel-inner&.item&a&img, .carousel-inner&.item&img, .img-responsive, .thumbnail a&img, .thumbnail&img {
max-width: 100%;
你还没有登录，请先登录或注册慕课网帐号
12995人关注
59604人关注
22993人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11如果你知道自己去哪，全世界都会为你让路
Bootstrap+JavaScript实现广告轮播
之前写过一个原生纯js版本的广告轮播，相比之前那个，这个由于用了Bootstrap框架，实现起来代码相对简单一点，而且也比较美观，效果如图：
这是其中的两张图片，可以看到上面有小圆点，就和平时看到的一些网站的一样，点击圆点可以切换图片，按照指定的顺序，还有上面的箭头，点击左右箭头，就可以左右移动，这就是大体的功能。
接下来上代码：
HTML代码：
id="ad-carousel" class="carousel slide" data-ride="carousel"&
class="carousel-indicators" id="dian"&
data-target="#ad-carousel" data-slide-to="0" class="active"&&
class="carousel-inner" id="change"&
class="item active"&
href="#"& src="#" id="one"&&
class="left carousel-control" href="#ad-carousel" data-slide="prev"&
class="glyphicon glyphicon-chevron-left"&&&
class="right carousel-control" href="#ad-carousel" data-slide="next"&
class="glyphicon glyphicon-chevron-right"&&&
这是轮播广告的基本框架，在这段代码中，首先就引入了bootstrap的.carousel类，它是bootstrap中定义的，每一个li相当于上面的小圆点。其中必须要有data属性，不然不会实现切换，在bootstrap中每一个data属性都和js代码相关，所以，data属性不可省去。
function createImg()
var images = ["images/1.jpg","images/2.jpg","images/3.jpg", "images/4.jpg", "images/5.jpg"];
var oltag = document.getElementById("dian");
var divtag = document.getElementById("change");
for (var i = 0; i & images. i++)
if (i == 0)
document.getElementById("one").src = images[i];
var li = document.createElement("li");
li.setAttribute("data-target", "#ad-carousel");
li.setAttribute("data-slide-to",""+(i+1));
oltag.appendChild(li);
var div = document.createElement("div");
div.className = "item";
var a = document.createElement("a");
var img = document.createElement("img");
img.src = images[i];
a.appendChild(img);
div.appendChild(a);
divtag.appendChild(div);
Js代码主要是创建img和li，在里面放图片和加上图片的小圆点。在每个标签上加上对应的类，就行了。
总结：以上代码中的左右箭头用了bootstrap的图形库，用起来也是很方便，有了bootstrap我们自己可以省很多代码，而且效果也很漂亮，但是不能过多依赖，代码还是要自己写的。
没有更多推荐了，bootstrap图片带文字轮播怎么写啊，哪位大侠知道啊，谢谢了_百度知道
bootstrap图片带文字轮播怎么写啊，哪位大侠知道啊，谢谢了
bootstrap图片带文字轮播怎么写啊，哪位大侠知道啊，谢谢了
我有更好的答案
&div id=&carousel-example-generic& class=&carousel slide& data-ride=&carousel&&
&!-- 小圆点指标 --&
&ol class=&carousel-indicators&&
&li data-target=&#carousel-example-generic& data-slide-to=&0& class=&active&&&/li&
&li data-target=&#carousel-example-generic& data-slide-to=&1&&&/li&
&li data-target=&#carousel-example-generic& data-slide-to=&2&&&/li&
&!-- 滚动图片 --&
&div class=&carousel-inner& role=&listbox&&
&div class=&item active&&
&img src=&图片路径1& alt=&...&&
&div class=&carousel-caption&&
&h3&郑锅集团专业锅炉70年&/h3&
&p&详情访问 &a& &/a&&/p&
&div class=&item&&
&img src=&图片路径2& alt=&...&&
&div class=&carousel-caption&&
&!-- 切换控制 --&
&a class=&left carousel-control& href=&#carousel-example-generic& role=&button& data-slide=&prev&&
&span class=&glyphicon glyphicon-chevron-left& aria-hidden=&true&&&/span&
&span class=&sr-only&&往前&/span&
&a class=&right carousel-control& href=&#carousel-example-generic& role=&button& data-slide=&next&&
&span class=&glyphicon glyphicon-chevron-right& aria-hidden=&true&&&/span&
&span class=&sr-only&&往后&/span&
&/a&&/div&
采纳率：84%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我用Angular+Bootstrap写了个轮播组件，不用angular-ui-bootstrap和AngularStrap上的，轮播大概写好了，就差一个左右切换的css3动画写的不尽人意，请各位大神帮我补充完整，万分感谢！demo的jsFiddle网址：，（里面js文件引用的是谷歌的，可能需要翻墙）
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
加上一些动画就好一些了，我帮你使用了，地址在这里
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

我要回帖

更多关于 bootstrap教程 的文章

 

随机推荐