使用 JavaScript 的基于 Web 的图像幻灯片

• 下载演示项目 - 221 Kb

引言

这是一个简单的教程，说明如何创建具有一些炫酷过渡效果的基于 Web 的图像幻灯片，这些效果类似于 Microsoft PowerPoint 中找到的效果。幻灯片循环播放一组图像，而无需重新加载页面的其余部分。大约有 23 种不同的过渡效果可供选择。还有一个选项，可以从其他 23 种过渡效果中随机选择一个。这些过渡效果也可以通过触发小的 JavaScript 代码片段来应用于图像。

为此使用了四个小的 JavaScript 函数

• image_effects()：生成不同的过渡效果。
• previous_image()：显示上一张图像。
• next_image()：显示下一张图像。
• slideshow_automatic()：在一定延迟后显示下一张图像。

创建图像列表并预加载图像

创建要在幻灯片中显示的图像列表

//creating a array of the image object
var image=new Array("images/image1.jpg",
                    "images/image2.jpg",
                    "images/image3.jpg",
                    "images/image4.jpg",
                    "images/image5.jpg",
                    "images/image6.jpg",
                    "images/image7.jpg",
                    "images/image8.jpg",
                    "images/image9.jpg",
                    "images/image10.jpg"
                    )
//variable that will increment through the images
var num=0
// set the delay between images
var timeDelay

Preload Images
Preload the images in the cache so that the images load faster
//create new instance of images in memory 
var imagePreload=new Array()
for (i=0;i<image.length;i++)
{
   imagePreload[i]=new Image()
// set the src attribute
imagePreload[i].src=image[i]
}

图像效果

以下 JavaScript 函数在从一张图像移动到下一张图像时呈现炫酷的过渡效果。这是通过使用视觉滤镜 - RevealTrans 来实现的，它指定应使用二十三种可用过渡类型中的哪一种（0-22）。通过使用滤镜的 apply() 和 play() 方法，我们可以调用过渡效果。

//function for the transition effects
function image_effects()
{
  var selobj = document.getElementById('slidehow_transition');
  var selIndex = selobj.selectedIndex;
  //set the transition to the number selected in the list
  slideShow.filters.revealTrans.Transition=selIndex
  slideShow.filters.revealTrans.apply()
  slideShow.filters.revealTrans.play()
  
}

手动幻灯片

使用“下一张”和“上一张”按钮手动启动幻灯片。previous_image() 和 Next_image() 函数非常简单明了。

//function to get the previous image in the array
function previous_image()
{  
  //code to execute only when the automatic slideshow is disabled 
   if (slideshow.checked==false)
   {
    if (num>0)
    {
       num--
       image_effects()
       //set the SRC attribute to let the browser load the preloaded images 
       document.images.slideShow.src=image[num] 
     }
    if (num==0)
    {  //if first image is displayed
       num=image.length
       num--
       image_effects()
       document.images.slideShow.src=image[num] 
    } 
  }  
}
//function to get the next image in the array
function next_image()
{ 
  //code to execute only when the automatic slideshow is disabled 
  if (slideshow.checked==false)
  {
    if (num<image.length)
    {
       num++
       //if last image is reached,display the first image
       if (num==image.length) 
       num=0
       image_effects()
        //set the SRC attribute to let the browser load the preloaded images 
       document.images.slideShow.src=image[num]   
    }
  } 
}

自动幻灯片

最后，这段代码在一段时间后更改图像。为此，我们使用 setTimeout() 方法来创建延迟。SetTimeout() 接受两个参数。第一个参数是一个字符串，它是一个在指定间隔过去后执行的 JavaScript 代码片段。第二个参数是一个整数，指定毫秒数。

//for automatic Slideshow of the Images
function slideshow_automatic()
{ 
if (slideshow.checked)
   {
    if (num<image.length)
     {
       num++
       //if last image is reached,display the first image
       if (num==image.length) 
       num=0
       image_effects()
       //sets the timer value to 4 seconds, 
       //we can create a timing loop 
       //by using the setTimeout method
       timeDelay=setTimeout("slideshow_automatic()",4000) 
       document.images.slideShow.src=image[num]   
     }
   }  
   if (slideshow.checked==false)
   { 
     //Cancels the time-out that was set with the setTimeout method. 
      clearTimeout(timeDelay)
   }
}

结论

总而言之，这是一个非常简单的脚本，您可以复制并粘贴到任何您想要的地方。毫不费力！