广告轮播效果的实现

最新推荐文章于 2024-05-10 08:50:53 发布

yuanmei1986

最新推荐文章于 2024-05-10 08:50:53 发布

阅读量1.1k

点赞数

分类专栏：前端流行文章标签： bootstrap carousel

本文链接：https://blog.csdn.net/yuanmei1986/article/details/50813337

版权

前端流行专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用Bootstrap中的carousel插件来实现，代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title></title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
  <style>
    .carousel > .carousel-inner > .item > img {
      width: 100%;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>jQuery插件——轮播广告(Carousel)</h1>
  <h2>带广告序号指示器(indicator)的轮播广告</h2>
  <div id="myAd6" class="carousel slide" data-ride="carousel" data-interval="3000">
  <!--广告主体内容-->
    <div class="carousel-inner">
      <div class="item active">
        <img src="img/11.jpg" alt=""/>
        <div class="carousel-caption">
          <h4>红花似火</h4>
          <p>简单的的文字说明啊说明啊</p>
        </div>
      </div>
      <div class="item">
        <img src="img/22.jpg" alt=""/>
        <div class="carousel-caption">
          <h4>大漠戈壁</h4>
          <p>简单的的文字说明啊说明啊</p>
        </div>
      </div>
      <div class="item">
        <img src="img/33.jpg" alt=""/>
        <div class="carousel-caption">
          <h4>花团锦簇</h4>
          <p>简单的的文字说明啊说明啊</p>
        </div>
      </div>
      <div class="item">
        <img src="img/44.jpg" alt=""/>
        <div class="carousel-caption">
          <h4>海底世界</h4>
          <p>简单的的文字说明啊说明啊</p>
        </div>
      </div>
    </div>

    <!--放在carousel-inner外面的内容不随着广告而滚动的-->
    <a data-slide="prev" class="carousel-control left" href="#myAd6"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a data-slide="next" class="carousel-control right" href="#myAd6"><span class="glyphicon glyphicon-chevron-right"></span></a>

    <!--广告序号指示器-->
    <ul class="carousel-indicators">
      <li data-target="#myAd6" data-slide-to="0" class="active"></li>
      <li data-target="#myAd6" data-slide-to="1"></li>
      <li data-target="#myAd6" data-slide-to="2"></li>
      <li data-target="#myAd6" data-slide-to="3"></li>
    </ul>
  </div>


</div>

<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script>
  var s = document.createElement('script');
  s.onload = function () {
    bootlint.showLintReportForCurrentDocument([]);
  }
  s.src = 'js/bootlint.js';
  document.body.appendChild(s);
</script>
</body>
</html>

这里写图片描述

yuanmei1986

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
广告轮播效果的实现

使用Bootstrap中的carousel插件来实现，代码如下：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Comp
复制链接

扫一扫