使用js制作轮播图的思路

最新推荐文章于 2024-07-31 16:33:32 发布

sandbox37

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量293

点赞数

文章标签：轮播图 JavaScript 事件绑定函数封装 DOM操作

本文链接：https://blog.csdn.net/weixin_59902634/article/details/126832975

版权

轮播图功能：

1.点击左右按钮，进行图片切换，对应 index 改变，对应的序号按钮颜色改变；

2.悬停在序号按钮上，进行图片切换，对应 index 改变，对应的序号按钮颜色改变。

思路：

用轮转法将上一个index对应的序号按钮的颜色改为橘色，修改index后将序号按钮对应的颜色改为粉色，修改图片地址。

基础版：

将事件与事件对应的DOM修改操作（修改index、修改序号按钮颜色、修改图片src属性值）直接绑定，所以有三类事件和对应的函数——左按钮，右按钮，序号按钮，其中序号按钮用事件委托和getelment函数（common.js）获得序号按钮下标，避免了循环获取序号按钮下标的麻烦。

javascript代码如下，其中$（）为common.js中的函数：

    oPic = $('#pic');
    oSlider = $('.slider');
    oBtnWrap = $('.btn-wrap');
    oPrevBtn = $('.prev');
    oNextBtn = $('.next');

    var index = 0;
    var count = 4;

    oPrevBtn.onclick = function () {
      oSlider.children[index].style.backgroundColor = "orange";
      index--;
      index = (index % count) && ((index - count) % count + count);
      // alert(index);
      oSlider.children[index].style.backgroundColor = "pink";
      oPic.src = `images/p${index + 1}.jpg`;
    }

    oNextBtn.onclick = function () {
      oSlider.children[index].style.backgroundColor = "orange";
      index++;
      index %= count;
      oSlider.children[index].style.backgroundColor = "pink";
      oPic.src = `images/p${index + 1}.jpg`;
    }

    oSlider.onmouseover = function (event) {
      if (event.target.tagName.toLowerCase() == 'span') {
        oSlider.children[index].style.backgroundColor = "orange";
        index = getElementIdx(event.target);
        oSlider.children[index].style.backgroundColor = "pink";
        oPic.src = `images/p${index + 1}.jpg`;
      }
    }

进阶版：

事件和匿名函数只进行index值的修改，图片和序号按钮颜色的修改用函数进行封装。

oPic = $('#pic');
    oSlider = $('.slider');
    oBtnWrap = $('.btn-wrap');
    oPrevBtn = $('.prev');
    oNextBtn = $('.next');

    var index = 0;
    var count = 4;

    function showChange(callback) {
      oSlider.children[index].style.backgroundColor = "orange";
      callback & callback();
      oSlider.children[index].style.backgroundColor = "pink";
      oPic.src = `images/p${index + 1}.jpg`;
    }

    oPrevBtn.onclick = function () {
      showChange(function () {
        index--;
        index = (index % count) && ((index - count) % count + count);
      });
    }

    oNextBtn.onclick = function () {
      showChange(function () {
        index++;
        index %= count;
      });
    }

    oSlider.onmouseover = function (event) {
      if (event.target.tagName.toLowerCase() == 'span') {
        showChange(function () {
          index = getElementIdx(event.target);
        });
      }
    }

网页模板代码如下：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="keywords" content="zuoye">
  <meta name="keywords" content="zuoye">
  <title>zuoye</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: center;
    }

    .banner {

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 500px;
      box-shadow: 0 0 8px #333;

    }

    .slider {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      bottom: 10px;
      width: 380px;
    }

    .slider span {
      width: 45px;
      height: 45px;
      line-height: 45px;
      background-color: orange;
      text-align: center;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }

    .btn-wrap span {
      user-select: none;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 85px;
      line-height: 85px;
      font-size: 32px;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
    }

    .btn-wrap span:hover {
      background-color: rgba(0, 0, 0, .8);
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="banner">
    <img id="pic" src="images/p1.jpg" width="500" height="375" alt="pkq">
    <div class="slider">
      <span style="background-color: pink;">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
    </div>
    <div class="btn-wrap">
      <span class="prev">&lt;</span>
      <span class="next">&gt;</span>
    </div>
  </div>
</body>
</html>