使用bootstrap设置轮播图

使用bootstrap设置轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="temp/css/bootstrap.min.css">               <!--指定你bootstrap的样式表位置-->
</head>
<body>
<div class="container">
    <div id="pic-carousel" class="carousel slide">
        <ol class="carousel-indicators">
            <li class="active" data-target="#pic-carousel" data-slide-to="0"></li>                <!--这里也需要相应添加li-->
            <li data-target="#pic-carousel" data-slide-to="1"></li>
            <li data-target="#pic-carousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <a href="http://www.sogou.com" target="_blank">        <!-- 点击图片跳转位置 可自定义设置-->
                    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4117297904,3217373055&fm=26&gp=0.jpg">      <!--可以设置网络图片地址,也可以设置本地图片-->
                </a>
            </div>
            <div class="item">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3475519406,1886502540&fm=26&gp=0.jpg">          <!--需要轮播几个图片就添加提个div-->
            </div>
            <div class="item">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2536309045,460034493&fm=26&gp=0.jpg">
            </div>
        </div>
        <a href="#pic-carousel" data-slide="prev" class="carousel-control left">        <!--图片上的左箭头-->
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a href="#pic-carousel" data-slide="next" class="carousel-control right">      <!-- 图片上的左箭头-->
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

<script src="temp/js/jquery-3.4.1.min.js"></script>             <!--指定你bootstrap的样式表位置-->
<script src="temp/js/bootstrap.min.js"></script>                <!--指定你JavaScript的脚本位置-->
<script type="text/javascript">
    $('#pic-carousel').carousel({
     
        interval : 3000             /*设置具体多少秒跳转一次*/
    });
</script>
</body>
</html>

你可能感兴趣的:(javascript,html5)