javascript经典特效分享 手风琴、轮播图、图片滑动

JavaScript经典特效分享

在前端开发中，JavaScript不仅可以用于数据交互、页面交互等，还可以用来实现各种各样的特效，比如手风琴、轮播图、图片滑动等。本文将一一介绍这三种常见的JavaScript特效的实现方法。

手风琴效果

手风琴效果就是指页面上有多个盒子，当用户单击某个盒子时，该盒子会变大，同时其他盒子变小。这种效果常用于呈现一些重要或突出的内容。

下面是手风琴效果的实现方法：

1. HTML部分

<div class="accordion">
  <div class="accordion-item">盒子1</div>
  <div class="accordion-item">盒子2</div>
  <div class="accordion-item">盒子3</div>
</div>

1. CSS部分

.accordion-item {
  width: 100%;
  height: 50px;
  background-color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.accordion-item.active {
  width: 80%;
  height: 200px;
  border-radius: 10px;
  background-color: #5b9aff;
  color: #fff;
}

1. JavaScript部分

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
  item.addEventListener('click', event => {
    accordionItems.forEach(item => {
      item.classList.remove('active');
    })
    event.target.classList.add('active');
  });
});

轮播图

轮播图是网站常见的一种图片展示方式，它可以用来展示产品图片、文章配图等。

下面是轮播图的实现方法：

1. HTML部分

<div class="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="./img/1.jpg" alt="图片1">
    </div>
    <div class="carousel-item">
      <img src="./img/2.jpg" alt="图片2">
    </div>
    <div class="carousel-item">
      <img src="./img/3.jpg" alt="图片3">
    </div>
  </div>
  <div class="carousel-control">
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
  </div>
</div>

1. CSS部分

.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: all 0.5s ease;
}

.carousel-item {
  width: 100%;
  flex: 0 0 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none;
}

.carousel-control span {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-control span:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

1. JavaScript部分

const carouselInner = document.querySelector('.carousel-inner');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

const imgCount = carouselInner.querySelectorAll('.carousel-item').length;
let imgIndex = 0;

prevBtn.addEventListener('click', () => {
  imgIndex--;
  if (imgIndex < 0) {
    imgIndex = imgCount - 1;
  }
  slideImg(imgIndex);
});

nextBtn.addEventListener('click', () => {
  imgIndex++;
  if (imgIndex >= imgCount) {
    imgIndex = 0;
  }
  slideImg(imgIndex);
});

function slideImg(index) {
  carouselInner.style.transform = `translateX(-${index * 100}%)`;
}

图片滑动

图片滑动是指页面上有多张图片，当用户鼠标悬停在某张图片上时，该图片会向左或向右滑动一定的距离，以显示隐藏内容。

下面是图片滑动的实现方法：

1. HTML部分

<div class="image-list">
  <div class="image-item">
    <img src="./img/1.jpg" alt="图片1">
    <div class="image-desc">图片1的描述</div>
  </div>
  <div class="image-item">
    <img src="./img/2.jpg" alt="图片2">
    <div class="image-desc">图片2的描述</div>
  </div>
  <div class="image-item">
    <img src="./img/3.jpg" alt="图片3">
    <div class="image-desc">图片3的描述</div>
  </div>
</div>

1. CSS部分

.image-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.image-item {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-item:hover .image-desc {
  left: 0;
}

.image-item img {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.image-desc {
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: all 0.5s ease;
}

以上是三种常见的JavaScript特效的实现方法，希望对大家有所帮助。