使用 JQuery 和 CSS 幻灯片图片

• 下载示例 - 92.72 KB

引言

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

Using the Code

我们可以使用 JavaScript 实现这个功能，或者使用 jQuery 使代码更简洁明了。

当客户从网站访问产品页面时，所有图片都会下载到客户的电脑上，然后我们可以使用 JavaScript 来操作这些图片。我们需要“上一张”、“下一张”按钮，一个包含所有图片的预览图片框，以及当用户浏览图片时，在每张图片旁边放置额外的描述。

HTML 的头部部分包含 jQuery 文件、我们自己的 JavaScript 代码，并将图片添加到我们的轮播对象中。

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/JScript3.js"></script>
    
<script type="text/javascript" src="js/JScript2.js"></script>
    
<script type="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 包含轮播对象，它操作图片

如果你打开 JScript2.js，你将看到以下代码

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

在 JavaScript 中，我们可以使用面向对象编程。首先，我们创建一个名为“slider”的对象，该对象具有一个名为“Interval”的属性。它的值为 2000 毫秒，这是我们的定时器间隔周期。

以下几行代码非常重要

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

我们创建了一个图像数组来保存 HTML 的 Image 对象。

• Slider.Index 将保存当前图像数组元素的索引。
• 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 将我们的描述区域的内部 HTML 更改为 image 的描述，并添加一个总图片索引指示。

你可以下载以上代码，然后用 FireFox、Internet Explorer 等打开它。