看程序学bootstrap33-插件之 轮播

最新推荐文章于 2022-08-08 11:08:01 发布
最新推荐文章于 2022-08-08 11:08:01 发布
阅读量123 收藏
点赞数
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tujiahao1/article/details/94038911
版权

示例 1 : 基本轮播

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
</div>

示例 2 : 带标题的轮播

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
      <div class="carousel-caption">
        LOL1
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
      <div class="carousel-caption">
        LOL2
      </div>
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
      <div class="carousel-caption">
        LOL3
      </div>
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
      <div class="carousel-caption">
        LOL4
      </div>
    </div>
 
  </div>
 
</div>

示例 3 : 设置轮播速度

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
</div>

示例 4 : 控制前后的轮播

<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
  div.item img{
    width:100%;
   }
  div#carousel-example-generic{
    width:80%;
    margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://how2j.cn/img/site/step/3491.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3492.png" >
    </div>
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3493.png" >
    </div>
 
    <div class="item">
            <img src="http://how2j.cn/img/site/step/3494.png" >
    </div>
 
  </div>
 
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 
  </a>
 
</div>
涂家豪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap笔记——轮播
senmu_的博客
12-01 208
轮播 1.基本轮播 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active">&lt
r语言导入ggplot2_R语言ggplot2-labs 函数
weixin_29094979的博客
12-24 1117
labs 函数主要有以下三个用途：1) 设置图片的标题(title), 子标题(subtitle), 引用(caption)代码示例：ggplot(mtcars, aes(mpg, wt, colour = cyl)) +geom_point() +labs(title = "This is title", subtitle = "This is subtitle", caption = "Thi...
bootstrap轮播图
qq_36943809的博客
12-18 193
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-gen...
用Bootstrap的Carousel做幻灯片尝试详解
01-15 354
用Bootstrap的Carousel做幻灯片尝试详解 window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[...
移动端网页特效（二）
m0_45659764的博客
05-09 869
2. 移动端常见特效 案例：返回顶部 步骤： 判断页面滚动的距离是否超出了指定距离，如果超出，就显示按钮，如果没有，就隐藏按钮 页面滚动的距离，就是整个页面滚出去的距离，规定到海外酒店部分的时候就显示按钮，所以滚动的距离等于海外酒店部分到页面最顶端的距离 给按钮设置点击事件，一点击就回到页面顶部 在上一节代码中继续添加： // 返回顶部模块 var goback = document.querySelector('.goBack'); var nav = docu
手把手教你使用bootstrap完成轮播图
weixin_42442856的博客
12-21 1万+
手把手教你使用bootstrap完成轮播图
BootStrap的JS插件之轮播效果案例详解
10-22
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。这篇文章主要介绍了BootStrap的JS插件之轮播效果案例详解的相关资料,需要的朋友可以参考下
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
01-19
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片，由于文章的图片大小不一，而轮播插件的大小基本是固定的，所以...
CPT-Bootstrap-Carousel：WordPress插件，可生成用于选择图像和内容的自定义帖子类型。 从短代码输出Bootstrap Image Carousel（slider）HTML
01-31
CPT自举轮播一种自定义帖子类型，用于选择图像和内容，该类型从[image-carousel]短代码输出Bootstrap Image Carousel（滑块）。描述一种用于选择图像和内容的自定义帖子类型，它使用短代码[image-carousel]从输出一...
Bootstrap示例程序
02-03
Bootstrap：简洁、直观、强悍的前端开发框架，让web开发更...示例源码的default.aspx就是根据JS插件的轮播功能修改。 欢迎感兴趣的用户下载研究。 博客地址： http://blog.csdn.net/rochsoft/article/details/50628981
bootstrap轮播图carousel插件
weixin_34418883的博客
05-09 273
一、基本介绍见：https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 二、例子：在PC端使用轮播图（高度固定，图片居中，容器铺满，使用背景图） <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&...
最好懂的 Bootstrap 实战案例教程
热门推荐
LakeYC的博客
03-07 6万+
我们每期会根据不用的项目案例安排不同的技术栈免费课程！免费！免费！免费！来帮助大家提高，有兴趣的同学可以私信我哦~ 所有项目都是以真实项目为实战例。 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是
python测试开发django-191.Bootstrap3 轮播图（Carousel）
qq_27371025的博客
05-09 1191
前言 Bootstrap3 实现轮播图滚动显示 轮播图（Carousel） 只需替换成自己本地图片/static/a1.png即可实现轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 css --> <link rel="stylesheet" t
解决BootStrap3.3.7轮播图不动、点击切换也无效的问题
Y-Stone的博客
02-24 1万+
html代码 <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <script src="../js/jquery-1.12.4.min.js"/> <script src="../bootstrap/js/bootstrap.min.js" /> ...
【前端学习】bootstrap 轮播图参数，以及js方法改变其参数。
weixin_43872912的博客
08-08 426
bootstrap轮播图
Bootstrap学习js插件篇之轮播
为者常成，行者常至
05-08 2万+
案例 下面展示的就是此插件和相关组件制作的轮播案例。
bootstrap 2-滚动广告Carousel
sanluo11的博客
01-25 1060
Carousel是一个用于轮播内容的组件，也就是我们经常用的滚动广告，或者滚动图片。 一个Carousel的基本结构： 代码模板： Previous Next 实例如下 body{ padding-top:50px } .carouse
Bootstrap学习之五：图片轮播
weixin_30443813的博客
05-25 101
@(Bootstrap) 导言 Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 示例 下面演示图片的轮播，使用bootstrap中的Carousel显示循环播放元素插件。 <div id="carousel-example-generic" cl...
Bootstrap的js插件之轮播(carousel)
bboyjoe的博客
08-08 7081
轮播请查看以下示例，基本已经涵盖最常用的一个轮播 js插件_轮播 --> .myCarousel{ width:50%; }
bootstrap-3.4.1-dist.zip\bootstrap-3.4.1-dist - zip 压缩文件, 解包大小为 1,7
最新发布
05-08
同时，Bootstrap还提供了许多插件和组件，如模态框、轮播图、下拉菜单、表格、表单等等，使得开发人员可以轻松地构建功能齐全的页面。所有这些组件都可以轻松调用，并能够在不同的浏览器和设备上进行自适应布局。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值