图片轮播

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bgc{
height:437px ;
1000px;
border: 1px solid red;
overflow: hidden;
margin: 0 auto;
}
#lunbo{
height: 400px;
100%;
border: 1px solid;
}
.head{
display: none;
}
</style>
</head>
<body>
<div id="bgc">
<img src="image/背景2.jpg" height="453px" class="head1" width="1000px" />
<img src="image/背景3.jpg.jpg" height="453px" class="head1" width="1000px"/>
</div>
<div id="lunbo">
<img src="image/3.jpg.jpg" style="height: 100% ; 100%; display: block;" class="head"/>
<img src="image/4.jpg.jpg" style="height: 100% ; 100%;" class="head"/>
<img src="image/5.jpg.jpg" style="height: 100% ; 100%;" class="head"/>
</div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){}

/*第一个轮播*/
var bs=0;
setInterval( "lun()",2000);
function lun(){
var img=document.getElementsByClassName("head1");
for (i=0;i<img.length;i++) {
img[i].style.display="none";
}
bs++;
if(bs>1){
bs=0;
}
img[bs].style.display="block";
}
/*第二个轮播*/
var index=0;
var timer=setInterval("qiehuan()",1000);
function qiehuan(){
index++;
index=index>2?0:index;
var head=document.getElementsByClassName("head");
for( var a=0;a<head.length;a++){
head[a].style.display="none";
}
head[index].style.display="block";
}

</script>

图片轮播（上面有按钮与滚动条）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="public/bootstrap4/css/bootstrap.min.css">
        <script src=" public/jquery/jquery-1.11.2.min.js"></script>
        <script src="public/bootstrap4/js/bootstrap.min.js"></script>
        <style type="text/css">
                img{
            width:100%;
            height: 400px;
        }
        </style>
    
    </head>
    <body>
        <div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>
    </body>
</html>