使用JQuery和CSS幻灯片放映图片

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

我们已经看到很多网站都有图片放映。 它们可以用来显示产品的各种图片。

使用代码

使用 JavaScript,我们可以实现这一点,或者我们可以使用JQuery使代码更加整洁整洁。

当客户从网站访问产品页面时,所有图片都被下载到客户的PC上,然后我们可以使用JavaScript来操作这些图片。 我们需要有一个"上一个","下一步"按钮,所有图像的预览图片框,而用户在图片上定位。

HTML head部分包括JQuery文件。我们自己的JavaScript代码,并向 slider 对象添加图片。

<scriptsrc="js/jquery-1.4.2.min.js"type="text/javascript"></script><scripttype="text/javascript"src="js/JScript3.js"></script><scripttype="text/javascript"src="js/JScript2.js"></script><scripttype="text/javascript"><!-- 
 slider.AddImage("img/mini.jpg","Mini Cooper Volks Wagon");
 slider.AddImage("img/nokia 3110.jpg","Latest Nokia 3110 fasdfsdfas fasfasfas");
 slider.AddImage("img/nokia 6500.jpg","this asdfi afa africa");
 slider.AddImage("img/printer.jpg","a cute printer asfd");
 slider.AddImage("img/sony eric.jpg","coool cellphone");
 slider.TitleField="#divTitle";
 slider.Preview="#divPreview";
 slider.Container="rImage";
 // --></script>

上面 行的说明:

  • JScript3.js 将帮助我们在当前浏览器中弹出一个新窗口
  • JScript2.js 包含 slider 对象,它操作图像

如果打开 JScript2.js,你将看到以下行:

slider=new Object ();
slider.Interval=2000;//2000ms

在JavaScript中,我们可以使用面向对象编程。 首先,我们创建一个名为" slider"的对象,它的属性称为" Interval"。 它的值是 2000毫秒,这是我们的计时器间隔周期。

以下几行非常重要:

slider.Images=new Array();
slider.Index=0; //image indexslider.TitleField=0;
slider.Preview=0;
slider.Container=0;

我们创建了一个图像 array 来保存html对象的Image

  • Slider.Index 将保存当前图像 array 元素索引。
  • 我们将使用 Slider.TitleField 来显示描述,我们将为它分配一个" <div>...</div>"。
  • Slider.Container 将被替代,以显示我们的图像,它是一个 Image 对象,它的src 属性被用来加载我们的图像。

现在,我们通过以下方法为 slider 对象定义一个函数:

slider.ShowImage=function(){
document[this.Container].src=this.ImageLoc();//$(this.Container).src = this.ImageLoc();if ($(this.TitleField).exists()) {
 if ($(this.Preview).exists()){ 
 $(this.TitleField).html(this.Title());
 }
 else{
 var count=this.Index;
 count++;
 $(this.TitleField).html(this.Title()+
 "<br/><br/>"+count+"/"+this.Images.length);
 }
 }
 this.ShowPreviews();
};
document[this.Container].src=this.ImageLoc(); 

上面 行将将我们的图像对象替换为屏幕上的新图片。

$(this.TitleField).html(this.Title()+"<br/><br/>"+count+"/"+this.Images.length);

上面 行执行以下两项操作: 它使用JQuery将我们的分区内部描述内部更改为 Image 描述,并添加一个全图指示的指标。

你可以下载 上面 代码,然后打开 Firefox。IE 等。


USE  显示  sli  Slide  picture  pictures  
相关文章