原生JS实现旋转轮播图+文字内容切换效果【附源码】

下面就是原生JS实现旋转轮播图+文字内容切换效果的攻略。

1、准备工作

在开始实现之前，需要做好一些准备工作：

准备好HTML结构，最外层包裹一个容器div，用来放置轮播图和文字内容。
在HTML文件中引入相应的CSS文件和JS文件。

2、实现旋转轮播图效果

实现旋转轮播图效果的代码如下所示（注释已经解释了代码的作用）：

var slideIndex = 1;  // 初始值为1，表示当前显示第一张图片
var timer = null;    // 定时器

showSlides(slideIndex);   // 显示第一张图片

// 下一张图片
function nextSlide() {
  showSlides(slideIndex += 1);
}

// 上一张图片
function previousSlide() {
  showSlides(slideIndex -= 1);  
}

// 自动轮播
function autoSlide() {
  timer = setInterval(function() {
    showSlides(slideIndex += 1);
  }, 2000);   // 间隔2秒
}

// 停止轮播
function stopSlide() {
  clearInterval(timer);
}

// 显示当前图片
function showSlides(n) {
  var slides = document.getElementsByClassName("slide");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}

其中，slideIndex表示当前显示的图片的索引，autoSlide函数用于自动轮播图片，stopSlide函数用于停止轮播，showSlides函数用于显示当前图片。

3、实现文字内容切换效果

实现文字内容切换效果的代码如下所示（注释已经解释了代码的作用）：

var contentIndex = 1;  // 初始值为1，表示当前显示第一条内容

showContent(contentIndex);   // 显示第一条内容

// 下一条内容
function nextContent() {
  showContent(contentIndex += 1);
}

// 上一条内容
function previousContent() {
  showContent(contentIndex -= 1);  
}

// 显示当前内容
function showContent(n) {
  var content = document.getElementsByClassName("content");
  if (n > content.length) {
    contentIndex = 1;
  }
  if (n < 1) {
    contentIndex = content.length;
  }
  for (var i = 0; i < content.length; i++) {
    content[i].style.display = "none";
  }
  content[contentIndex - 1].style.display = "block";
}

其中，contentIndex表示当前显示的内容的索引，showContent函数用于显示当前内容。

4、完整代码及示例说明

以下是完整的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>轮播图效果</title>
  <link rel="stylesheet" href="style.css">
</head>
<body onload="autoSlide()">
  <div class="container">
    <div class="slideshow">
      <div class="slide"><img src="1.jpg"></div>
      <div class="slide"><img src="2.jpg"></div>
      <div class="slide"><img src="3.jpg"></div>
    </div>
    <div class="controls">
      <a href="#" onclick="previousSlide()">&#10094;</a>
      <a href="#" onclick="nextSlide()">&#10095;</a>
    </div>
    <div class="content">
      <h1>文字内容1</h1>
      <p>这是一些文字内容。</p>
    </div>
    <div class="content">
      <h1>文字内容2</h1>
      <p>这是一些文字内容。</p>
    </div>
    <div class="content">
      <h1>文字内容3</h1>
      <p>这是一些文字内容。</p>
    </div>
    <div class="controls">
      <a href="#" onclick="previousContent()">&#10094;</a>
      <a href="#" onclick="nextContent()">&#10095;</a>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS样式如下所示：

* {box-sizing: border-box;}
.container {position: relative;}
.slideshow {max-width: 700px; margin: auto; position: relative;}
.slide {display: none;}
.slide img {width: 100%;}
.controls {position: absolute; top: 50%; width: 100%; z-index: 1; display: flex; justify-content: space-between;}
.controls a {color: #fff; cursor: pointer; font-size: 2em; margin: 0 10px;}
.content {display: none;}
.content h1 {font-size: 3em; text-align: center;}
.content p {font-size: 1.5em; text-align: center;}

其中，container是最外层的容器，slideshow是轮播图容器，slide是每一张图片的容器，controls是轮播图控制按钮容器，content是文字内容容器。

下面是两个示例：

示例1：上一张/下一张

点击上一张或下一张按钮，可以实现轮播图效果。代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>轮播图效果示例1</title>
  <style>
    * {box-sizing: border-box;}
    .container {position: relative;}
    .slideshow {max-width: 700px; margin: auto; position: relative;}
    .slide {display: none;}
    .slide img {width: 100%;}
    .controls {position: absolute; top: 50%; width: 100%; z-index: 1; display: flex; justify-content: space-between;}
    .controls a {color: #fff; cursor: pointer; font-size: 2em; margin: 0 10px;}
    .content {display: none;}
    .content h1 {font-size: 3em; text-align: center;}
    .content p {font-size: 1.5em; text-align: center;}
  </style>
</head>
<body onload="autoSlide()">
  <div class="container">
    <div class="slideshow">
      <div class="slide"><img src="1.jpg"></div>
      <div class="slide"><img src="2.jpg"></div>
      <div class="slide"><img src="3.jpg"></div>
    </div>
    <div class="controls">
      <a href="#" onclick="previousSlide()">&#10094;</a>
      <a href="#" onclick="nextSlide()">&#10095;</a>
    </div>
  </div>
  <script>
    var slideIndex = 1;  // 初始值为1，表示当前显示第一张图片
    var timer = null;    // 定时器

    showSlides(slideIndex);   // 显示第一张图片

    // 下一张图片
    function nextSlide() {
      showSlides(slideIndex += 1);
    }

    // 上一张图片
    function previousSlide() {
      showSlides(slideIndex -= 1);  
    }

    // 自动轮播
    function autoSlide() {
      timer = setInterval(function() {
        showSlides(slideIndex += 1);
      }, 2000);   // 间隔2秒
    }

    // 停止轮播
    function stopSlide() {
      clearInterval(timer);
    }

    // 显示当前图片
    function showSlides(n) {
      var slides = document.getElementsByClassName("slide");
      if (n > slides.length) {
        slideIndex = 1;
      }
      if (n < 1) {
        slideIndex = slides.length;
      }
      for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slides[slideIndex - 1].style.display = "block";
    }
  </script>
</body>
</html>

示例2：上一条/下一条

点击上一条或下一条按钮，可以实现文字内容切换效果。代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>文字内容切换效果示例2</title>
  <style>
    * {box-sizing: border-box;}
    .container {position: relative;}
    .slideshow {max-width: 700px; margin: auto; position: relative;}
    .slide {display: none;}
    .slide img {width: 100%;}
    .controls {position: absolute; top: 50%; width: 100%; z-index: 1; display: flex; justify-content: space-between;}
    .controls a {color: #fff; cursor: pointer; font-size: 2em; margin: 0 10px;}
    .content {display: none;}
    .content h1 {font-size: 3em; text-align: center;}
    .content p {font-size: 1.5em; text-align: center;}
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <h1>标题1</h1>
      <p>内容1</p>
    </div>
    <div class="content">
      <h1>标题2</h1>
      <p>内容2</p>
    </div>
    <div class="content">
      <h1>标题3</h1>
      <p>内容3</p>
    </div>
    <div class="controls">
      <a href="#" onclick="previousContent()">&#10094;</a>
      <a href="#" onclick="nextContent()">&#10095;</a>
    </div>
  </div>
  <script>
    var contentIndex = 1;  // 初始值为1，表示当前显示第一条内容

    showContent(contentIndex);   // 显示第一条内容

    // 下一条内容
    function nextContent() {
      showContent(contentIndex += 1);
    }

    // 上一条内容
    function previousContent() {
      showContent(contentIndex -= 1);  
    }

    // 显示当前内容
    function showContent(n) {
      var content = document.getElementsByClassName("content");
      if (n > content.length) {
        contentIndex = 1;
      }
      if (n < 1) {
        contentIndex = content.length;
      }
      for (var i = 0; i < content.length; i++) {
        content[i].style.display = "none";
      }
      content[contentIndex - 1].style.display = "block";
    }
  </script>
</body>
</html>

以上就是原生JS实现旋转轮播图+文字内容切换效果的完整攻略，希望可以帮助到你。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现旋转轮播图+文字内容切换效果【附源码】 - Python技术站

原生JS实现旋转轮播图+文字内容切换效果【附源码】

1、准备工作

2、实现旋转轮播图效果

3、实现文字内容切换效果

4、完整代码及示例说明

相关文章