图片轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bgc{
height:437px ;
width: 1000px;
border: 1px solid red;
overflow: hidden;
margin: 0 auto;
}
#lunbo{
height: 400px;
width: 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% ;width: 100%; display: block;" class="head"/>
<img src="image/4.jpg.jpg" style="height: 100% ;width: 100%;" class="head"/>
<img src="image/5.jpg.jpg" style="height: 100% ;width: 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>
