使用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>