侧边栏增加8+自动轮播广告位，文字版+图片版-知新网

------正文内容展示，开始汲取新知识啦------

文字版轮播+图片轮播两种样式代码，时间可以自己调整，没有做测试，希望用了的兄弟评论里发个演示哈。

文字版

<style>
  .advertise-container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
    text-align: center;
  }
  .advertise-container .advertise-item {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .advertise-container a {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    font-size: 24px;
    animation: pulse 2s ease infinite;
    background: transparent;
  }
  @keyframes pulse {
    0% {
      color: #000;
    }
    50% {
      color: #f00;
    }
    100% {
      color: #000;
    }
  }
</style>

<div class="advertise-container">
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位1</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位2</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位3</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位4</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位5</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位6</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位7</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位8</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位9</div>
  </a>
  <a href="https://www.uzhix.com/" target="_blank">
    <div class="advertise-item">广告位10</div>
  </a>
</div>

<script>
  var advertise = document.querySelectorAll('.advertise-item');
  var index = 0;
  setInterval(function() {
    advertise.forEach(function(item) {
      item.style.display = 'none';
    })
    if (index >= advertise.length) {
      index = 0;
    }
    advertise[index].style.display = 'block';
    index++;
  }, 2000)
</script>

图片版

<style>
  .advertise-container {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
  }
  .advertise-container .advertise-item {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  .advertise-container a {
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    font-size: 24px;
    animation: pulse 2s ease infinite;
    background: transparent;
    text-align: center;
  }
  .advertise-container img {
    width: 100%;
    height: 100%;
  }
  @keyframes pulse {
    0% {
      color: #000;
    }
    50% {
      color: #f00;
    }
    100% {
      color: #000;
    }
  }
</style>

<div class="advertise-container">
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位1"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="图片链接" alt="广告位2"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="图片链接" alt="广告位3"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="图片链接" alt="广告位4"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位5"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位6"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位7"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位8"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位9"></div>
  </a>
  <a href="https://www.baidu.com" target="_blank">
    <div class="advertise-item"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt="广告位10"></div>
  </a>
</div>

<script>
  var advertise = document.querySelectorAll('.advertise-item');
  var index = 0;
  setInterval(function() {
    advertise.forEach(function(item) {
      item.style.display = 'none';
    })
    if (index >= advertise.length) {
      index = 0;
    }
    advertise[index].style.display = 'block';
    index++;
  }, 2000)
</script>

温馨提示：本文最后更新于2023-07-29 17:28:00，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。

------本文内容已结束，喜欢请分享------

感谢您的访问，Ctrl+D收藏本站吧。

相关声明 1、本站名称：知新网
2、本站永久网址：https://www.uzhix.com
3、本站部分内容源于网络和用户投稿，仅供学习与参考，如有侵权，请联系站长进行删除处理。
4、用户评论和发布内容，并不代表本站赞同其观点和对其真实性负责。
5、本站禁止以任何方式发布或转载任何违法的相关信息。
6、资源大多存储在云盘，如发现链接失效，请联系我们替换更新。

三月 3