1. 程式人生 > >bootstrap 實現輪播圖

bootstrap 實現輪播圖

3.3.7版本


<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        /*調整容器大小*/
#myCarousel { width: 600px; } /*調整圓圈連結ol位置*/ .carousel-indicators { bottom: -5px; } /*調整輪播圖位置*/ #carousel-example-generic { top: 100px; }
</style> </head> <body> <div class="container"
id="myCarousel">
<!-- 輪播圖容器 --> <div id="carousel-example-generic" class="carousel slide"> <!-- 輪播圖上的圓圈連結 --> <ol class="carousel-indicators radiou"> <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> </ol> <!-- 輪播圖具體內容 --> <div class="carousel-inner"> <div class="item active"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510071051013&di=fe871132a698a7e62aa1036240aa221b&imgtype=jpg&src=http%3A%2F%2Fimg.evolife.cn%2F2015-01%2Fbde62420fc3165f8_thumb.jpg" style="height: 300px; width:600px"> <!-- 圖上文字 --> <div class="carousel-caption"> <h4>Red Car Fly</h4> <p>ajsuten hsdfupeia jsdtfua</p> </div> </div> <div class="item"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077934469&di=d7d222fb5b5465fde75425e984cf2b90&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f2478787ac5c295d143ac4b0311.jpg" style="height: 300px; width:600px"> <!-- 圖上文字 --> <div class="carousel-caption"> <h4>White Car Fly</h4> <p>ajsuten hsdfupeia jsdtfua</p> </div> </div> <div class="item"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077977327&di=404f5cf97186c344d0a34a343f8be5b2&imgtype=0&src=http%3A%2F%2Fimg.autofan.com.cn%2F2016-12-05%2F16%2Ff206c101380a.JPG" style="height: 300px; width:600px"> <!-- 圖上文字 --> <div class="carousel-caption"> <h4>Blue Car Fly</h4> <p>ajsuten hsdfupeia jsdtfua</p> </div> </div> </div> <!-- 輪播圖上的向前一圖切換連結 --> <a href="#carousel-example-generic" data-slide="prev" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <!-- 輪播圖上的向後一圖切換連結 --> <a href="#carousel-example-generic" data-slide="next" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <!-- 引入jquery與bootstrap的js檔案 --> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(".carousel").carousel({ interval:2000 //每隔兩秒自動輪播 }) </script> </body> </html></code>