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来处理一些复杂的交互逻辑。