实用的js 焦点图切换效果 结构行为相分离

下面是关于“实用的js 焦点图切换效果 结构行为相分离”的完整攻略：

一、什么是结构行为相分离

结构行为相分离（Separation of Concerns，SoC）是一种设计思想，即将一个系统分为若干个组成部分，每个部分负责不同的内容，从而使系统更加模块化、可维护和可扩展。在Web开发中，这种设计思想得到广泛应用，尤其在前端开发中更是不可或缺。

具体来说，结构行为相分离在前端开发中主要有两个方面的应用：

1. HTML和CSS的分离：将页面的结构和样式分离开来，让页面的结构更加清晰，易于修改和维护。

2. JS的分离：将页面的交互行为和页面逻辑分离开来，保持页面的可维护性和可扩展性。

二、实现方案

对于页面中的焦点图（轮播图）切换效果，我们可以通过结构行为相分离的思想来实现：

1. HTML结构部分

HTML结构部分主要包括焦点图容器、图片列表和图片说明等。

<div class="slider">
  <ul class="slider-list">
    <li><img src="img/1.jpg" alt=""/></li>
    <li><img src="img/2.jpg" alt=""/></li>
    <li><img src="img/3.jpg" alt=""/></li>
    <li><img src="img/4.jpg" alt=""/></li>
    <li><img src="img/5.jpg" alt=""/></li>
  </ul>
  <div class="slider-nav"></div>
  <div class="slider-prev"></div>
  <div class="slider-next"></div>
</div>

1. CSS样式部分

CSS样式部分主要包括焦点图容器、图片列表和图片说明等的样式。

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  margin: 0 auto;
}

.slider-list {
  position: absolute;
  width: 500%;
  height: 100%;
  left: 0;
  top: 0;
}

.slider-list li {
  float: left;
  width: 20%;
  height: 100%;
  overflow: hidden;
}

.slider-list li img {
  width: 100%;
  height: 100%;
  display: block;
}

.slider-nav {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.slider-nav span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 5px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
}

.slider-nav span.active {
  background-color: #fff;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  width: 48px;
  height: 48px;
  background-image: url('img/prev-next.png');
  background-position: 0 0;
  cursor: pointer;
}

.slider-next {
  right: 0;
  background-position: -48px 0;
}

1. JS行为部分

JS行为部分主要负责焦点图的切换动效和导航按钮的切换。

// 获取DOM元素
var slider = document.querySelector('.slider');
var sliderList = slider.querySelector('.slider-list');
var sliderItems = slider.querySelectorAll('.slider-list li');
var sliderNav = slider.querySelector('.slider-nav');
var sliderPreBtn = slider.querySelector('.slider-prev');
var sliderNextBtn = slider.querySelector('.slider-next');
var navItems = [];
var curIndex = 0;

// 初始化DOM元素状态
for (var i = 0; i < sliderItems.length; i++) {
  var span = document.createElement('span');
  sliderNav.appendChild(span);
  navItems.push(span);
}
navItems[curIndex].classList.add('active');
sliderList.style.left = 0;

// 切换动效函数
function switchSlider(nextIndex) {
  var startLeft = parseInt(sliderList.style.left) || 0;
  var endLeft = -nextIndex * slider.offsetWidth;
  var curLeft = startLeft;
  var step = 0;
  var count = 10;
  var interval = 16;
  var dis = endLeft - startLeft;

  function animate() {
    step++;
    if (step >= count) {
      clearInterval(timer);
      curIndex = nextIndex;
      return;
    }
    curLeft = startLeft + dis * step / count;
    sliderList.style.left = curLeft + 'px';
  }

  var timer = setInterval(animate, interval);
}

// 导航按钮点击事件
sliderNav.addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'span') {
    var index = navItems.indexOf(e.target);
    if (index !== curIndex) {
      navItems[curIndex].classList.remove('active');
      navItems[index].classList.add('active');
      switchSlider(index);
    }
  }
});

// 左右切换按钮点击事件
sliderPreBtn.addEventListener('click', function() {
  var index = curIndex - 1;
  if (index < 0) {
    index = navItems.length - 1;
  }
  navItems[curIndex].classList.remove('active');
  navItems[index].classList.add('active');
  switchSlider(index);
});
sliderNextBtn.addEventListener('click', function() {
  var index = curIndex + 1;
  if (index >= navItems.length) {
    index = 0;
  }
  navItems[curIndex].classList.remove('active');
  navItems[index].classList.add('active');
  switchSlider(index);
});

// 自动播放
var autoPlayTimer = setInterval(function() {
  var index = curIndex + 1;
  if (index >= navItems.length) {
    index = 0;
  }
  navItems[curIndex].classList.remove('active');
  navItems[index].classList.add('active');
  switchSlider(index);
}, 3000);

三、示例说明

下面是两个示例说明：

示例一

假设我们现在要在一个具有图片切换效果的页面中添加一个新的焦点图切换功能，该功能可以通过一个新的HTML容器来实现，同时还需保持页面的结构清晰和可维护性，那么我们就可以利用结构行为相分离的思想，将该功能的JS行为与当前的JS行为部分分离开来，在自己的JS文件中完成该功能的实现，从而达到复用JS代码的目的。

示例二

假设我们现在要在一个页面中添加一个新的交互行为，该交互行为需要与已有的焦点图切换功能进行联动，那么我们就可以使用事件订阅（Event Subscription）的方式来实现结构行为相分离。具体来说，我们可以在已有的JS行为部分中使用一个事件来代替某个具体的操作，如焦点图切换结束后触发一个名为“switched”的自定义事件，然后在新的交互行为中监听该事件，从而实现两个交互行为的联动。这样可以通过结构行为相分离的方式来进行代码复用，并提高代码的可维护性和可扩展性。