bootstrap轮播插件教程

用bootstrap做自适应网站已成为一种主流,bootstrap轮播插件如何使用呢?bootstrap轮播插件教程如下:

工具/原料

bootstrap手册

web编辑器(这里推荐Sublime text3)

高版本的浏览器(谷歌等可以测试自适应的浏览器)

方法/步骤

打开bootstrap手册找到 Carousel JavaScript 插件,先熟悉 Carousel插件效果及代码布局

首先写最外面的主题部分

<div id="myCarousel" class="carousel slide">

...这里面写主要内容

</div>

先定义一个ID为myCarousel class名称为carousel slide 这是固定的

其次写 Indicators 就是轮播图下面的 指示信息 通常有 圆形、方形、圆圈等

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

</ol>

这里 OL 也可以用 UL 这 data-target="#myCarousel" ID和外面的一样。

第三写轮播主体部分

<div class="carousel-inner">

<div class="item active" style="background:#223240">

<img src="/blank.gif" data-echo="img/slide1.png" alt="first img"><!--图片不居中,让图片居中给这个img设置margin:0 auto-->

</div>

<div class="item" style="background:#F5E4DC;">

<img src="/blank.gif" data-echo="img/slide2.png" alt="second img">

</div>

<div class="item" style="background:#DE2A2D;">

<img src="/blank.gif" data-echo="img/slide3.png" alt="third img">

</div>

</div>

这里的图片和上一步提示是一致的 上一步写了 0~2的索引,是三个提示信息,那么这里就写三张图片的内容。

第四写左右 Controls

<a href="#myCarousel" data-slide="prev" class="carousel-control left">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a href="#myCarousel" data-slide="next" class="carousel-control right">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

这里的图标可以从bootstrap图片库是寻找 注意 data-slide 的用法。

第五,写JS代码,carousel 方法

<script type="text/javascript">

//轮播自动播放

$('#myCarousel').carousel({

//自动4秒播放

interval : 4000,

});

</script>

因为JS加载慢,所以建议放到最下面</body>之前。

浏览器测试效果。

最好是边做边测试,有不合适的地方即可修改。把浏览器放小一些,检测网页是否自适应屏幕大小不同的设备。

注意事项

代码边写边测试效果

ID class名一定要写正确,必要的时候要复制,手打的话可能会出错,仔细、耐心

标签:教程, 主流, 轮播插件
分类:电脑软件
时间:2016-09-18

bootstrap轮播插件教程的相关文章

JS幻灯片轮播移植教程-JS特效JavaScript教程

新闻焦点图制作-JS幻灯片轮播移植教程-JS特效jQuery特效JavaScript教程很多前端网页设计者的朋友在制作网页的时候经常需要用到JS幻灯片轮播的切换效果,比如新闻焦点图、首页产品banner幻灯片轮播等等,在这里给大家介绍一下怎么把从网络下载的js幻灯片代码移植到自己的网页界面中来。

如何给论坛设置图片轮播

为了能让站长用户更好滴管理论坛,官方一般都会增设轮播插件,站长可以设置是否开启图片轮播,可以设置轮播的图片数量,也可以设置轮播图片来自哪些板块,每套模板展示图片的地方,展示的位置可以也不一样. 进入论坛首页,点击右上角"后台管理". 进入后台管理--插件--图片轮播设置. 是否开启或关闭:开启次功能,则会在论坛首页显示图片轮播,关闭则不会显示,其他设置页不会奏效. 轮播图片数量设置:轮播图片显示的数量,最大数量是10,不宜过大. 轮播图片来源:定义轮播图片来自哪些板块,这个对论坛的美观

淘宝店铺旺铺专业版全屏轮播制作图文教程

本教程是针对那些没有多少淘宝店铺装修经验的小白们,一些小卖家自己开的店铺,没有太多资金花钱让第三方服务来装修自己的店铺,但是自己对装修用的代码又不是很了解,下面这个教程详细介绍了淘宝店铺旺铺专业版全屏轮播的实现方法

Axure RP Pro 7.0轮播图按钮控制效果手把手教程

当下几乎所有大小网站都有轮播图展示功能,你还可以用鼠标点击轮播图上的按钮来切换图片;当你需要制作带按钮控制的轮播图效果时,往往会上网搜索制作方法,但很难找到详细步骤说明和演示,本人也经历过欲找教程但屡次无果的痛苦,因此在这里跟大家详细描述每个实现步骤,力求让每位小白无须动脑袋、无条件看完就会。

超酷响应式带缩略图的jQuery轮播图插件应用介绍

PgwSlideshow是一款非常实用的响应式、支持触摸屏的jQuery轮播图插件。该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度。你也可以自定义轮播图的高度,图片宽度会根据高度等比例匹配。 该轮播图插件的特点有:响应式设计;支持桌面和移动手机设备;轻量级,压缩后只有4kb;可以通过CSS来自定义轮播图的样式;

【Dreamweaver教程】怎样制作轮播广告

轮播广告指的是随机播放的一组图片,我们经常用这种方式来设计网站上的广告。

淘宝店铺装修教程——图片轮播

好多新手开店了,却不会如何装修自己的店铺,今天我们就讲讲如何设置图片轮播。如过有不懂得地方可以联系我。

QQ真人秀、QQ照片秀轮播教程

你还在天天换QQ秀或者QQ照片秀吗?你见过GIF格式的照片秀吗?告诉你,这些统统过时了。今天我告诉大家一个好消息,QQ照片秀、真人秀可以实现轮播了。简单地说就是QQ照片秀每隔5秒自动换一张。

建站宝盒使用教程之图片轮播功能设置

图片轮播是宣传自身产品比较有利的工具,设置的时候您可以选择多个图片以及选择不同的展示风格。