基于bootstrap的网页开发之图片轮播

最新推荐文章于 2023-04-19 21:02:32 发布

wu_bangbang

最新推荐文章于 2023-04-19 21:02:32 发布

阅读量733

点赞数 1

分类专栏：笔记理解文章标签： bootstrap carousel

本文链接：https://blog.csdn.net/wu_bangbang/article/details/51307882

版权

笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

理解

6 篇文章 0 订阅

订阅专栏

我的例子用的是本地图片，如果你们想试一试就换个图片试试。。。

代码如下：

 <!doctype html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Document</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

<style>
 .carousel {
            height: 500px;
            margin-bottom: 60px;
        }
        .carousel .item {
            height: 500px;
            background-color: #000;
        }
        .carousel .item img {
            width: 100%;
        }
        .carousel-caption {
            z-index: 10;
        }
        .carousel-caption p {
            margin-bottom: 20px;
            font-size: 20px;
            line-height: 1.8;
        }
</style>
   </head>
   <body>
    <div id="myCarousel" class="carousel side" data-ride="carousel">

<pre class="prettyprint tryit prettyprinted" style="border-width: 1px 1px 1px 4px; border-style: solid; border-color: rgb(221, 221, 221); margin: 15px auto; padding: 10px 15px; font-stretch: normal; line-height: 20px; font-family: 'courier new'; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; color: rgb(51, 51, 51); background: url("/images/codecolorer_bg.gif") 50% 0% rgb(251, 251, 251);"><span class="pln" style="border: 0px; margin: 0px; padding: 0px; color: rgb(0, 0, 0);"> </span><span class="com" style="border: 0px; margin: 0px; padding: 0px; color: rgb(136, 0, 0);"><!-- 轮播（Carousel）指标 --></span>

<!-- 轮播（Carousel）项目 -->

<div class="carousel-inner"> <div class="item active"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\chrome-big.jpg" alt="1 side"> <div class="container"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/"role="button" target="_blank">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\firefox-big.jpg" alt="2 side"> <div class="container"> <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> <div class="item"> <img src="D:\HTML学习\实践的操作\bootstrap网页开发\images\safari-big.jpg" alt="3 side"> <div class="container"> <div class="carousel-caption"> <h1>Safari</h1> <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" role="button">点我下载</a></p> </div> </div> </div> </div>

<!-- 轮播（Carousel）导航 -->

先放一张截图

这是一个轮播图···

该轮播图主要是通过carousel这个js插件，这个插件是通过

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

来引入的。

通过data属性来控制轮播carousel的位置。

data-side 接受关键字prve 或 next，用来改变图片相对于当前位置的位置。

data-side-to 来向轮播床底添加一个原始滑动索引，索引从0开始计数。

data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放。

没什么好写的了···

如果有什么不明白的可以留言问我，，，我尽量给你解答。吐舌头

wu_bangbang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于bootstrap的网页开发之图片轮播

我的例子用的是本地图片，如果你们想试一试就换个图片试试。。。代码如下： Document .carousel { height: 500px; margin-bottom: 60px; } .carousel .item {
复制链接

扫一扫