几种常见的JavaScript图片效果

<div id="slider">  <img src="img1.jpg" alt="image1" class="active">  <img src="img2.jpg" alt="image2">  <img src="img3.jpg" alt="image3"></div>

#slider img {  display: none;  width: 100%;}  #slider img.active {  display: block;}

let sliderImages = document.querySelectorAll('#slider img');let currentImageIndex = 0;setInterval(() => {  sliderImages[currentImageIndex].classList.remove('active');  currentImageIndex = (currentImageIndex + 1) % sliderImages.length;  sliderImages[currentImageIndex].classList.add('active');}, 3000);

function preloadImage(url) {  let img = new Image();  img.src = url;}preloadImage("img1.jpg");preloadImage("img2.jpg");preloadImage("img3.jpg");

<div id="image-container">  <img src="img.jpg" alt="image"></div>

#image-container {  position: relative;}  #image-container img {  position: absolute;  top: 0;  left: 0;  cursor: move;}

let image = document.querySelector('#image-container img');let isDragging = false;let startX, startY;image.addEventListener('mousedown', function(event) {  isDragging = true;  startX = event.clientX - image.offsetLeft;  startY = event.clientY - image.offsetTop;});  image.addEventListener('mousemove', function(event) {  if (isDragging) {    image.style.left = (event.clientX - startX) + 'px';    image.style.top = (event.clientY - startY) + 'px';  }});image.addEventListener('mouseup', function(event) {  isDragging = false;});

<img id="blur-image" src="img.jpg" />

#blur-image {  -webkit-filter: blur(10px);  filter: blur(10px);}