#warper {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
}

/* 顶部 */
.top {
  width: 100%;
  padding: 0 20px;
  height: 30px;
  line-height: 30px;
  background-color: #f4f4f4;
}

.topInfo {
  margin: 0 auto;
  width: 1100px;
}

.top .topInfo span a {
  text-decoration: none;
}

.top .topInfo span a:visited {
  color: #000;
}

.topInfo span:nth-child(1) {}

.topInfo span:nth-child(2) {
  display: inline-block;
  float: right;
}

.topInfo span:nth-child(3) {
  float: right;
  margin-right: 20px;
}

#scroll {
  display: inline-block;
}

.titleScroll {}

/* 头部 */
.header {
  margin: 0 auto;
  width: 1100px;
}

.logo {
  display: inline-block;
}

.nav {
  display: inline-block;
}

.nav ul {
  list-style: none;
}

.nav ul li {
  float: left;
  text-align: center;
  width: 100px;
  height: 24px;
  font-size: 14px;
}

.nav.ul li a:visited {
  color: #bdbdbd;
}

/* bannder */

.banner {
  position: relative;
}

.mySlides {}

.yuandian {
  position: absolute;
  bottom: 10px;
  left: 50%;
  text-align: center;
}

/* 主体 */

.main {
  margin: 0 auto;
  width: 1100px;

}

.mainTop {
  display: flex;
  flex-direction: row;
}

.mainTop .news {
  width: 720px;
}

/* 新闻 */
.newsTitle {
  padding-right: 10px;
  margin: 0;
  height: 56px;
  line-height: 56px;
  font-size: 20px;
  font-weight: bold;
}

.newsTitle span {
  font-size: 14px;
  font-weight: normal
}

.newsTitle a {
  text-decoration: none;
  float: right;
  font-size: 12px;
  padding-right: 10px;
}

.newsTitle a:visited {
  color: #000;
}

.newsCon {
  list-style: none;
  padding: 0;
  margin: 0;
}

.newsCon li {
  display: flex;
  flex-direction: row;
  margin-top: 8px;
}

.newsCon li img {
  display: inline-block;
  width: 159px;
  height: 90px;
}

.newsCon li .cent {
  padding: 0 14px;
  display: inline-block;
}

.newsCon li .cent h3 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.newsCon li .cent p {
  line-height: 30px;
  width: 420px;
}

/* .newsCon li span {
  display: inline-block;
  padding: 0 7px;
  font-size: 18px;
  width: 80px;
} */
.newsCon li a {
  text-decoration: none
}

.newsCon li a .date {
  display: inline-block;
  text-align: center;
  width: 88px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  overflow: hidden;
}

.newsCon li a .day {
  color: #000;
  background: #fff;
  font-size: 26px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(51, 51, 51, 1);
  line-height: 53px;
}

.newsCon li a .mouty {
  display: block;
  color: #fff !important;
  background: #0b347f;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 39px;
}

/* 工程案例 */

.mainTop .case {
  width: 380px;
}

.mainTop .case img {
  display: block;
  margin: 0 auto;
}

/* 滚动 */
.mainBottom {
  margin: 10px 0;
  width: 1100px;
}

.mainBottom h6 {
  padding-right: 10px;
  margin: 0;
  height: 56px;
  line-height: 56px;
  font-size: 20px;
  font-weight: bold;
}

.mainBottom h6 span {
  font-size: 14px;
  font-weight: normal
}

.mainBottom h6 a {
  text-decoration: none;
  float: right;
  font-size: 12px;
  padding-right: 10px;
}

.mainBottom h6 a:visited {
  color: #000;
}

.mainBottomCen {
  position: relative;
  overflow: hidden;
  /* display: flex;
  flex-direction: row; */
}

.mainBottomCen1 {
  width: 1140px;

}

/* .mainBottom div {
  margin: 0 auto; */
/* align-items: center; */
/* } */
#btn1 {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -48px;
}

#btn2 {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -48px;
}

.mainBottom ul {
  padding: 0;
  margin: 0 20px;
  width: 1050px !important;
  height: 244px;
  list-style: none;
  overflow: hidden;

  /* display: flex;
  flex-direction: row; */
}

.mainBottom ul li {
  float: left;
  margin: 0 8px;
  width: 325px;
}

.pic a {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  width: 372px;
  overflow: hidden;
}

.pic a img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
}

/* 底部 */
.footer {
  padding: 10px 0;
  width: 100%;
  color: #bdbdbd;
  background-color: #394048;
}

.footerContent {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: 1100px;
}

.footerContent div {
  justify-content: space-between;
}

.footerContent .left img {
  margin-top: 40px;
}

.footerContent .left h3 {
  margin-top: 40px;
  font-weight: normal;
}

.footerContent .right {
  display: flex;
  flex-direction: column;
}

.footerContent .right .Bnav {}

.footerContent .right .Bnav ul {
  list-style: none;
}

.footerContent .right .Bnav li {
  width: 100px;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
  font-size: 14px;
}

.footerContent .right .Bnav li a {
  text-decoration: none;
}

.footerContent .right .Bnav li a:visited {
  color: #bdbdbd;
}

.footerContent .right .Badd {
  padding-left: 20px;
  display: flex;
  flex-direction: row;
}

.footerContent .right .Badd ul {
  list-style: none;
}

.footerContent .right .Badd ul li {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}

.footerContent .right .Badd ul li i {
  width: 25px;
  margin-left: 10px;
}

.footerContent .right .Badd img {
  margin-right: 20px;
}


/* 淡出动画 */
.fade {
  -webkit-animation-name: fade;
  /* Safari 和 Chrome */
  -webkit-animation-duration: 1.5s;
  /* Safari 和 Chrome */
  animation-name: fade;
  /* 必须定义动画的名称和动画的持续时间。*/
  animation-duration: 1.5s;
  /* 如果省略持续时间，动画将无法运行，因为默认值是0 */
}

@-webkit-keyframes fade {

  /* Safari 和 Chrome */
  from {
    opacity: .4
  }

  /* opacity 属性 透明度级别 */

  to {
    opacity: 1
  }
}

@keyframes fade {

  /* opacity???? 明天看 */
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

JS代码 var slideIndex=0;
showSlides();

function showSlides() {
  var i;
  var slides=document.getElementsByClassName("mySlides");
  var dots=document.getElementsByClassName("dot");

  for (i=0; i < slides.length; i++) {
    slides[i].style.display="none";
  }

  slideIndex++;

  if (slideIndex > slides.length) {
    slideIndex=1
  }

  for (i=0; i < dots.length; i++) {
    dots[i].className=dots[i].className.replace(" active", "");
    /* replace如果没找到的话 返回原字符 */
  }

  slides[slideIndex - 1].style.display="block";
  dots[slideIndex - 1].className+=" active";
  setTimeout("showSlides()", 2000); // 切换时间为 2 秒
}

实现幻灯片自动播放（同时添加了上一张下一张按钮功能和点选） HTML代码（把图片改一下就行） < !DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet"href="2.css"type="text/css"></head><body><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="../images/img1.jpg"style="width:100%"><div class="text">文本 1</div></div><div class="mySlides fade"><div class="numbertext">2 / 3</div><img src="../images/img2.jpg"style="width:100%"><div class="text">文本 2</div></div><div class="mySlides fade"><div class="numbertext">3 / 3</div><img src="../images/img3.jpg"style="width:100%"><div class="text">文本 3</div></div><a class="prev"onclick="plusSlides(-2)">❮</a>< !-- 这里-2是因为slideIndex++;
--><a class="next"onclick="plusSlides(0)">❯</a>< !-- 这里 0是因为slideIndex++;

--></div><br><div style="text-align:center"><span class="dot"onclick="currentSlide(0)"></span><span class="dot"onclick="currentSlide(1)"></span><span class="dot"onclick="currentSlide(2)"></span></div><script src="2.js"></script></body></html>CSS代码 * {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
}

.mySlides {
  display: none
}

/* 幻灯片容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* 下一张 & 上一张 按钮 */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  /* 左侧按钮的圆角边框  右上角和右下角 */
}

/* 定位 "下一张" 按钮靠右  以及右侧按钮的圆角边框  左上角和左下角*/
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* 标题文本 */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* 数字文本 (1/3 等) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* 标记符号 */
.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  /* 实现圆形   */
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}




/* 淡出动画 */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}