首页轮播效果参考 

摘录于网上资源

<!DOCTYPE html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/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" data-interval="3000" class="carousel slide" data-ride="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>
 
    <!-- 轮播的幻灯片项目 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-21/5c6e434e8d2fb.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-02-11/5c6137ee00320.jpg" >
        </div>
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7aa191adb.jpg" >
        </div>
    
        <div class="item">
            <img src="http://pic1.win4000.com/wallpaper/2019-01-27/5c4d7a9f6030c.jpg">
            <!-- 
            <div class="carousel-caption">
                <h4>title</h4>
                <p>content</p>
            </div>
             -->
        </div>

        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

 

posted @ 2019-02-22 14:12  秋水秋色  阅读(201)  评论(0)    收藏  举报