3款不同图片左右全屏切换特效源码

3款不同图片左右全屏切换特效源码

效果预览

想象一下，你的网页上有一系列全屏的图片，点击左右按钮或者滑动屏幕，图片可以平滑地左右切换。这种效果不仅美观，而且能为用户带来更好的浏览体验。下面，我将为你提供三种不同的实现方式，每种方式都有其独特的特点和适用场景。

实现方式

1. 基于CSS3 Transition的纯CSS实现

• 优点: 性能优秀，代码简洁，易于维护。
• 缺点: 功能相对简单，无法实现复杂的交互效果。

<div class="slider">
  <div class="slide active">
    <img src="image1.jpg" alt="">
  </div>
  <div class="slide">
    <img src="image2.jpg" alt="">
  </div>
  </div>
<button class="prev">上一张</button>
<button class="next">下一张</button>

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10   0%;
  transition: transform 0.5s ease-in-out;
}

.active {
  transform: translateX(0);
}

.prev:hover + .slider .active {
  transform: translateX(100%);
}

.next:hover + .slider .active {
  transform: translateX(-100%);
}

2. 基于JavaScript的点击切换

• 优点: 灵活度高，可以实现更多的交互效果。
• 缺点: 代码相对复杂，需要更多的JavaScript知识。

const slides = document.querySelectorAll('.slide');
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.nex   t');
let currentSlide = 0;

function showSlide(n) {
  slides[currentSlide].classList.remove('acti   ve');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].classList.add('active');
}

prevButton.addEventListener('click', () => {
  showSlide(currentSlide - 1);
});

nextButton.addEventListener('click', () => {
  showSlide(currentSli   de + 1);
});

3. 基于jQuery的滑动切换

• 优点: 简化DOM操作，提供丰富的插件和动画效果。
• 缺点: 引入jQuery会增加页面加载时间。

<div class="slider">
  <div>图片1</div>
  <div>图片2</div>
  </div>

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  autoplay: true,
  autoplaySpeed: 2000
});

拓展功能

• 自动播放: 使用定时器或CSS3动画实现自动播放。
• 触摸滑动: 为移动端添加触摸事件，实现滑动切换。
• 指示点: 添加指示点，显示当前幻灯片的位置。
• 淡入淡出效果: 使用CSS3的opacity属性实现淡入淡出效果。
• 自定义动画: 使用CSS3的动画属性创建自定义的切换动画。

注意事项

• 图片预加载: 对于大量图片，可以考虑预加载，提高用户体验。
• 响应式设计: 使用媒体查询，让幻灯片在不同屏幕尺寸下自适应。
• 性能优化: 对于复杂的动画效果，可以考虑使用硬件加速。

总结

以上三种方式各有优劣，选择哪种方式取决于你的项目需求和对技术的掌握程度。纯CSS实现性能好，但功能有限；JavaScript实现灵活度高，但代码量较大；jQuery实现简单方便，但引入了一个额外的库。

你可以根据自己的需求，选择最适合的实现方式，并在此基础上进行扩展和优化。

想了解更多，可以提出以下问题：

• 如何实现无限循环的幻灯片？
• 如何添加自定义的动画效果？
• 如何实现触摸滑动？
• 如何在幻灯片中嵌入视频？

如果你需要更具体的代码示例或有其他问题，欢迎随时提出。

温馨提示： 在实际项目中，你可能需要结合多种方式来实现更复杂的幻灯片效果。例如，可以使用CSS3实现基本的切换动画，再用JavaScript来处理一些复杂的交互逻辑。