js图片切换特效3款常用的代码

JavaScript可以用来实现各种图片切换特效

下面土嘎嘎小编分享几个常见的示例：

1. 淡入淡出（Fade In/Out）效果：

   〓〓javascript代码如下：〓〓

   // HTML结构：<img id="myImage" src="image1.jpg">

   var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

   var currentIndex = 0;

   var imgElement = document.getElementById("myImage");

   setInterval(function() {

     imgElement.style.opacity = 0; // 淡出

     setTimeout(function() {

       currentIndex = (currentIndex + 1) % images.length;

       imgElement.src = images[currentIndex];

       imgElement.style.opacity = 1; // 淡入

     }, 1000); // 切换间隔，以毫秒为单位

   }, 3000); // 图片展示时间，以毫秒为单位

2. 幻灯片（Slideshow）效果：

   〓〓javascript代码如下：〓〓

   // HTML结构：<div id="slideshow"><img src="image1.jpg"></div>

   var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

   var currentIndex = 0;

   var slideElement = document.getElementById("slideshow");

   setInterval(function() {

     currentIndex = (currentIndex + 1) % images.length;

     slideElement.innerHTML = '<img src="' + images[currentIndex] + '">';

   }, 3000); // 图片切换间隔，以毫秒为单位

3. 滑动（Slide）效果：

   〓〓javascript代码如下：〓〓

   // HTML结构：<div id="slider"><img src="image1.jpg"></div>

   var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

   var currentIndex = 0;

   var sliderElement = document.getElementById("slider");

   setInterval(function() {

     var nextIndex = (currentIndex + 1) % images.length;

     var nextImage = '<img src="' + images[nextIndex] + '">';

     sliderElement.style.opacity = 0; // 淡出

     setTimeout(function() {

       sliderElement.innerHTML = nextImage;

       sliderElement.style.opacity = 1; // 淡入

       currentIndex = nextIndex;

     }, 1000); // 切换动画时长，以毫秒为单位

   }, 3000); // 图片切换间隔，以毫秒为单位

上面土嘎嘎给出的例子展示了一些基本的图片切换特效，你可以根据需求进行修改和扩展，实现更复杂和独特的效果。这些效果可以应用于网站、幻灯片演示、相册等场景中，增加视觉吸引力和用户体验。注意，在实际应用中可能需要更多的样式和DOM操作来完善这些特效。