案例3：轮播图组件
<!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 101 Template</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- 多个轮播图id不能相同 --> <div id="czxy" class="carousel slide" data-ride="carousel" data-interval="2000"> <!-- 小圆点 --> <ol class="carousel-indicators"> <li data-target="#czxy" data-slide-to="0" class="active"></li> <li data-target="#czxy" data-slide-to="1"></li> <li data-target="#czxy" data-slide-to="2"></li> </ol> <!-- 轮播图片，默认展示的图片加入active样式 --> <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> <!-- 左右按钮 --> <a class="left carousel-control" href="#czxy" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#czxy" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>
轮播图DIV的定时换图属性
data-interval=“毫秒值”
注意：多个轮播图必须修改轮播图的ID。
案例4：热卖商品【重点】
<!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 101 Template</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>热门商品<img src="../img/title2.jpg"/></h2> </div> </div> <div class="row"> <div class="col-lg-2 visible-lg"> <img src="../products/hao/big01.jpg" width="110%"/> </div> <div class="col-lg-10"> <div class="row"> <div class="col-lg-6 hidden-xs hidden-sm"> <img src="../products/hao/middle01.jpg"/> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> </div> <div class="row"> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> <div class="col-lg-2 col-xs-6"> <p align="center"> <img src="../products/hao/small03.jpg"/><br/> 电饭锅<br/> <font color="#ff0b0b">￥299.0</font><br/> </p> </div> </div> </div> </div> </div> </body> </html>
