CSS+Js遮罩效果的TAB及焦点图片切换(推荐)

让我来为你详细讲解一下“CSS+Js遮罩效果的TAB及焦点图片切换(推荐)”的完整攻略。

简介

这个教程主要是介绍如何使用CSS和JavaScript实现遮罩效果的TAB及焦点图片切换。通过熟悉和学习这个教程，你可以更好的理解和掌握CSS和JavaScript的使用方法，从而可以灵活地应用这些技巧来实现各种各样的页面效果。

教程步骤

1. 创建基本的HTML结构，包括遮罩效果的TAB和焦点图片切换的布局。
2. 使用CSS对布局进行样式设计，包括对遮罩效果的TAB和焦点图片切换的样式定义。
3. 使用JavaScript对TAB和焦点图片切换进行实现，包括处理点击事件和控制样式变化等。
4. 进行测试和调试，确保效果正常。

示例

为了更好地理解和实践这个教程，下面给出两个示例说明，分别是遮罩效果的TAB和焦点图片切换的实现。

示例1：遮罩效果的TAB

HTML：

<div class="tab-box">
  <ul class="tab-list">
    <li class="tab-item active">TAB 1</li>
    <li class="tab-item">TAB 2</li>
    <li class="tab-item">TAB 3</li>
  </ul>
  <div class="tab-content-box">
    <div class="tab-content-item active">
      <p>TAB 1 CONTENT</p>
    </div>
    <div class="tab-content-item">
      <p>TAB 2 CONTENT</p>
    </div>
    <div class="tab-content-item">
      <p>TAB 3 CONTENT</p>
    </div>
  </div>
</div>

CSS：

.tab-box {
  position: relative;
}
.tab-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  box-sizing: border-box;
}
.tab-item:hover {
  background-color: #eee;
}
.tab-item.active {
  background-color: #ccc;
}
.tab-content-box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}
.tab-content-box .tab-content-item {
  display: none;
}
.tab-content-box .tab-content-item.active {
  display: block;
}

JavaScript：

var tabList = document.querySelector('.tab-list');
var tabContents = document.querySelectorAll('.tab-content-item');

tabList.addEventListener('click', function(event) {
  var tabItem = event.target.closest('.tab-item');
  if (tabItem && !tabItem.classList.contains('active')) {
    // 切换激活状态
    var activeTabItem = tabList.querySelector('.tab-item.active');
    activeTabItem.classList.remove('active');
    tabItem.classList.add('active');

    // 切换内容显示
    var activeTabContent = document.querySelector('.tab-content-item.active');
    activeTabContent.classList.remove('active');

    var tabIndex = Array.prototype.indexOf.call(tabItem.parentNode.children, tabItem);
    tabContents[tabIndex].classList.add('active');
  }
});

示例2：焦点图片切换

HTML：

<div class="focus-box">
  <ul class="focus-list">
    <li class="focus-item active"><img src="image1.jpg" alt="Image 1"></li>
    <li class="focus-item"><img src="image2.jpg" alt="Image 2"></li>
    <li class="focus-item"><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <div class="focus-arrow-box">
    <span class="focus-arrow focus-arrow-prev">&lt;</span>
    <span class="focus-arrow focus-arrow-next">&gt;</span>
  </div>
</div>

CSS：

.focus-box {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.focus-list {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.focus-item {
  flex: 1;
}
.focus-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.focus-arrow-box {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
.focus-arrow {
  display: inline-block;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
}
.focus-arrow:hover {
  background-color: #999;
}
.focus-arrow-prev {
  border-radius: 10px 0 0 10px;
  margin-right: 10px;
}
.focus-arrow-next {
  border-radius: 0 10px 10px 0;
  margin-left: 10px;
}

JavaScript：

var focusList = document.querySelector('.focus-list');
var focusItems = document.querySelectorAll('.focus-item');
var focusArrows = document.querySelectorAll('.focus-arrow');

var focusIndex = 0;

function setActiveFocusItem(index) {
  var activeFocusItem = focusList.querySelector('.focus-item.active');
  activeFocusItem.classList.remove('active');
  focusItems[index].classList.add('active');
  focusIndex = index;
}

function switchToPrevFocusItem() {
  var prevIndex = focusIndex - 1;
  if (prevIndex < 0) {
    prevIndex = focusItems.length - 1;
  }
  setActiveFocusItem(prevIndex);
}

function switchToNextFocusItem() {
  var nextIndex = focusIndex + 1;
  if (nextIndex >= focusItems.length) {
    nextIndex = 0;
  }
  setActiveFocusItem(nextIndex);
}

focusArrows[0].addEventListener('click', switchToPrevFocusItem);
focusArrows[1].addEventListener('click', switchToNextFocusItem);

以上就是两个示例说明，希望可以帮助你更好地理解和实践这个教程。