图片无缝滚动BootStrap 轻松实现

来源：互联网发布：win8动态桌面软件编辑：程序博客网时间：2024/05/17 22:13

图片无缝滚动，不需要繁琐的javascript代码，只需引用BootStrap 中的javascript插件（Carousel)即可轻松实现。来看看吧：
现附上演示地址：

https://haochn.github.io/BootStrap/PicSwitch.html

源代码：

<!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>BootStrap 实现图片无缝滚动</title><style>.body {    display: block;      margin-left: auto;      margin-right: auto;     float: none;     width:800px;}</style><!-- 新 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap.min.css">    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="js/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="js/bootstrap.min.js"></script>  </head>  <body><div class="body"> <h1 class="text-center">BootStrap 实现图片无缝滚动</h1>    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- 轮播（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>    <li data-target="#carousel-example-generic" data-slide-to="3"></li>  </ol>  <!-- 轮播（Carousel）项目内容 -->  <div class="carousel-inner" role="listbox">    <!-- 默认显示图片 -->    <div class="item active">      <img src="img/1.jpg" alt="态生两靥之愁，娇袭一身之病。">     <!-- 图片描述内容 -->      <div class="carousel-caption">        态生两靥之愁，娇袭一身之病。      </div>    </div>    <div class="item">      <img src="img/2.jpg" alt="泪光点点，娇喘微微。">      <div class="carousel-caption">        泪光点点，娇喘微微。      </div>    </div>     <div class="item">      <img src="img/3.jpg" alt="闲静似娇花照水，行动如弱柳扶风。">      <div class="carousel-caption">        闲静似娇花照水，行动如弱柳扶风。      </div>    </div>     <div class="item">      <img src="img/4.jpg" alt="心较比干多一窍，病如西子胜三分。">      <div class="carousel-caption">        心较比干多一窍，病如西子胜三分。      </div>    </div>  </div>   <!-- 轮播（Carousel）导航(控制左右移动) -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left"></span>    <span class="sr-only">Previous</span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right"></span>    <span class="sr-only">Next</span>  </a></div></div>  </body></html>

是不是很简单没呢？？？，自己动手试试吧！！！

1 0