轮播图的实现

Original 2019-02-27 14:21:45 221
abstract:<!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewp
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
</head>
<body>
<!--1.创建轮播图的容器-->
<div id="slider" class="carousel slide" data-ride="carousel">
    <!--2.设置播放顺序-->
 <ol class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0"></li>
        <li data-target="#slider" data-slide-to="1"></li>
        <li data-target="#slider" data-slide-to="2"></li>
    </ol>
    <!--3.设置图片-->
 <div class="carousel-inner">
        <div class="item active">
            <img src="../1.jpg" alt="">
            <div class="carousel-caption">广告1</div>
        </div>
        <div class="item">
            <img src="../2.jpg" alt="">
            <div class="carousel-caption">广告2</div>
        </div>
        <div class="item">
            <img src="../3.jpg" alt="">
            <div class="carousel-caption">广告3</div>
        </div>
    </div>

    <!--4.控制播放-->
 <a href="#slider" class="carousel-control left" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>

    <a href="#slider" class="carousel-control right" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

1.创建轮播图的容器
<div class="carousel" data-ride="carousel" id="slider">
    2.设置播放顺序
    <div class="carousel-indicators">
        <li data-target="#slider" data-slide-to="0"></li>
    </div>
    3.设置图片
    <div class="carousel-inner">
        <div class="item">
            <img src="" alt="">
            <div class="carousel-caption">图片描述</div>
        </div>
    </div>
    4.控制播放,可手动切换
    <a href="#slider" class="carousel-control left" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left">添加标签</span>
    </a>
    <a href="#slider" class="carousel-control right" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-right">添加标签</span>
    </a>
</div>


</body>
<script src="../jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
</html>


Correcting teacher:查无此人Correction time:2019-02-27 15:56:16
Teacher's summary:完成的不错。轮播图的效果很多,要尝试不同的效果。继续加油

Release Notes

Popular Entries