首先，简单的图像翻转。

图像翻转常用于交互式导航栏。当我们的鼠标移动到导航栏时，按钮的外观会发生变化。例如，我们使用以下黑白缩略图作为导航图表。当鼠标移动到指定的图标时，图标会变成一幅明亮的彩色图片。预览如下：

这个页面的代码非常简单，所以我们以此为例来实现一步一步的图像滚动：

img-rollover.html

！DOCTYPE html htmlhealtheta charset=' UTF-8 ' title rollover Images/title style html，body { line-height : 1；背景色： # 334873；} h1 { font-family : ' colaboratererural '，Arial，无衬线；} p { font-family : ' colaboratererural '，Arial，无衬线；color:白色；}.徽标{字母-spacing :-1px；color: rgb(195，151，51)；text-shadow : 2px 2px 1px rgba(0，0，0， 25)；font : normal 54px ' ColaborateThinRegular '，Arial，无衬线；} # gallery img { display : inline-block；margin: 10pxborder: 1px实心rgb(0，0，0)；}/style script src=' http : js/jquery-1 . 7 . 2 . min . js '/script script $(du cument)。ready()；//end ready/script/header dydiv class=' wrapper ' div class=' header ' p class=' logo ' easy Sir/p/div class=' content ' div class=' main ' h1翻转图像/h1 p将鼠标放在下面的图像上/p div id=' gallery ' A href=' Images/blue . jpg ' img src=' http 3360 Images/blue . jpg ' width=' 70 ' height=' 70 ' alt=' blue '/A href=' Images/jpg ' img '它主要包含一个Logo部分，一个标题和六个A链接。中间我们省略了38行的jQuery代码，现在我们逐渐给它添加代码，实现图像翻转的效果。

1.更改图像的src属性。

我们知道网页上显示的每个图像都有一个src属性，它代表文件的路径并指向服务器上的图片。如果我们更改该属性的值，浏览器将显示一张新图片。对于上面的代码，我们可以首先通过每个()函数获得所有img元素的遍历，并在相应的位置添加以下代码：

脚本$(文档)。ready(function(){ $(' # gallery img '))。每个()；});//end ready/script我们可以通过jQuery的arrt()方法获取img的src属性。然后，我们用新图片的路径替换上面img的src属性值，如下所示：

脚本$(文档)。ready(function(){ $(' # gallery img '))。每个(函数(){ var oldSrc=$(this))。attr(' src ')；var new pic=new Image()；var imgExt=/(。w{3，4 } $)/；newpic . src=old src . replace(IMgext，' _ h $ 1 ')；});});//end ready/script中，会有一个简单的分析这段代码的镜像预加载。这里，首先回顾一下，attr()函数允许读取标签的指定html属性值。例如，上例中传入的“src”参数意味着读取图像的src属性。如果将第二个参数传递给attr()方法，则可以重置属性值。例如：

$('#pic1 ')。attr('src '，' images/newimg . jpg ')；

此外，attr()函数还允许我们一次修改多个HTML属性值。比如我们需要加载的newImg和oldImg的大小不匹配时，为了避免新图片失真，可以同时改变Img元素的宽度和高度属性。方法如下：传入一个对象直接量作为参数：

var new img=new Image()；newimg . src=' images/new image . jpg '；$('#pic1 ')。attr({ src: newImg.src，width: newImg.width，height : NewIMg . height })；2.图像预加载。

如果我们在鼠标移动到指定图像时改变图像的src属性来实现图像翻转，就会出现一个小问题。当我们将鼠标移动到指定的图标上时，图像的src属性会改变。此时，浏览器将转到新的src路径下载资源映像。现场下载图片往往会给用户明显的延迟感。为了克服这个烦人的问题，我们可以提前将图片下载到浏览器的缓存中。

事实上，在代码2中，我们实现了图片的预加载。在代码2的第四行，首先获取每张图片的src属性；第5行创建新图像；第6~7行，使用正则表达式，在旧图像src的末尾添加_h，并将其分配给新创建的图像src。例如，旧图片的src为‘images/blue . jpg’，而‘images/blue _ h . jpg’被分配给新创建的newPic的src属性。

代码执行到“new pic . src=oldrc . replace(img ext，' _ h $ 1 ')；”，浏览器将转到指定的src下载新图片并将其放入浏览器缓存中。此时，鼠标事件还没有被触发，所以我们可以通过在脚本开始时逐个下载所需的图像来预加载图像。

3.添加悬停()事件，实现图像翻转。

图像预加载完成后，下一步是向要滚动的图像添加悬停事件。当鼠标移动到指定的图片时，图片变成绚丽的颜色，去掉后又变回黑白。在代码2的基础上，我们添加了以下内容：

$(文档)。ready(function(){ $(' # gallery img '))。每个(函数(){ var oldSrc=$(this))。attr(' src ')；var new pic=new Image()；var imgExt=/(。w{3，4 } $)/；newpic . src=old src . replace(IMgext，' _ h $ 1 ')；$(这个)。悬停(function(){ $(this))。attr('src '，NewPic . src)；}，function(){ $(this)。attr('src '，old src)；} );//结束悬停})；});//end ready代码非常简单，只不过在第7~14行通过这个给当前图片添加了一个悬停事件，鼠标进出时图片的src发生了变化。此时保存添加的img-rollover.html，注意按照代码中指定的路径放置好js/jquery-1.7.2.min.js和图片资源。你完蛋了。可以像预览图片一样测试图片导航和图片滚动的效果。

第二，漂亮的相册。

在滚动图像后，我们希望走得更远。当我们点击小缩略图时，我们可以显示大图，就像一个可以翻转的相册。预览如下：

接下来，我们在实现小图片滚动代码1的基础上增加了相册功能。

1.为什么把img放在链接里？

有些人可能不明白为什么img要分别包含在A链接中。其实这是一种不干涉的JavaScript技术。如果你的浏览器关闭了JavaScript，图像会包含在这里的一个链接中，当用户点击小图像时，他也会访问大图像文件。只有通过链接的方式，当你点击链接时，你会退出当前的网页，并根据链接加载一个大的图像文件。如下图所示：

以上是针对已经关闭JavaScript的用户。但是，一般来说，对于使用JS的访问者，我们希望在点击页面时呈现一个小缩略图的大图像，而不是链接到另一个页面。一般点击链接会导致Web浏览器加载链接指向的内容，所以这里的第一步是防止浏览器在点击图片链接时跳转到页面。我们使用事件的preventDefault()方法来阻止事件的正常行为，并添加了以下代码：

$(文档)。就绪(函数(){ 0.//省略未更改的部分$ ('# gallery a ')。点击(功能(evt) {evt。prevent default()；});//结束点击})；//end ready添加的代码在链接中添加一个click事件，当链接被点击时，事件的常规行为被事件的preventDefault()方法阻止。这时，当我们再次点击页面上的图片链接时，浏览器不会跳转到更大的页面。当然，对于没有JavaScript的浏览器，跳转还是会实现的，因为关闭是通过JavaScript完成的。

2.单击缩略图在页面上显示更大的图像。

为了展示大图，我们基于上面的代码添加了一个id为bigImg的div，如代码4的第9行所示：

div id=' gallery ' a href=' images/blue . jpg ' img src=' http : images/blue . jpg ' width=' 70 ' height=' 70 ' alt=' blue '/a href=' images/green . jpg ' img src=' http : images/green . jpg ' width=' 70 ' height=' 70 ' alt=' green '/a href=' images/orange . jpg ' img src=' http 3

.//省略未更改的部分$ ('# gallery a ')。点击(功能(evt) {evt。prevent default()；var imgPath=$(this)。attr(' href ')；var new IMg=$(' IMg src=' http : ' IMgpath ' ')；newimg . hide()；$('#bigImg ')。prepend(NewIMg)；newimg . fade in(1000)；});//end在代码5的第五行点击，首先通过attr()函数获取a的href属性，即链接地址imgPath；第6行：根据连接地址创建一个img标签，并将标签的src属性赋给imgPath；第七行，先把图片藏起来，然后淡入淡出会显得华丽；在第8行，将img标记添加到div id='bigImg'/div。如果第7行没有隐藏操作，图像会立即出现。第9行，淡入显示图像。好的，保存代码，在浏览器中打开，点击缩略图，发现相册已经被查看过了。然而，当我们不断点击相册时，历史图片并不会消失。如果我们一直点击，图片会一直列出来。如下图所示：

实际上，每当我们点击一个缩略图，代码都会为我们创建一个新的img，并将其添加到div id='bigImg'/div中。从DOM的角度来看，它会不断添加子节点：

为了达到“相册”的效果，我们应该在显示新照片的同时删除以前的图片。继续在代码5中添加以下内容：

.//省略未更改的部分$ ('# gallery a ')。点击(功能(evt) {evt。prevent default()；var imgPath=$(this)。attr(' href ')；var OLd mg=$(' # BigIMg img ')；var new IMg=$(' IMg src=' http : ' IMgpath ' ')；newimg . hide()；$('#bigImg ')。prepend(NewIMg)；newimg . fade in(1000)；oldImg.fadeOut(1000，function(){ $(this))。移除()；});});//end click代码第6行首先获取已有图像oldImg，当新图像淡入时，图像应该淡出。第1 ~ 13行，新图片淡入后，旧图片淡出。同时，给fadeOut函数传递一个回调函数，在oldImg淡出后去掉图像的img标签。这样，我们保证了div id='bigImg'/div在DOM树中始终只有一个Img节点，不会无限增长。

接下来，调整一些细节。当我们点击这个页面时，我们希望默认显示第一张图片。为了实现这个小功能，我们只需要在代码6之后添加一行代码：

.//省略未更改的部分$ ('# gallery a ')。点击(功能(evt) {evt。prevent default()；var imgPath=$(this)。attr(' href ')；var OLd mg=$(' # BigIMg img ')；var new IMg=$(' IMg src=' http : ' IMgpath ' ')；newimg . hide()；$('#bigImg ')。prepend(NewIMg)；newimg . fade in(1000)；oldImg.fadeOut(1000，function(){ $(this))。移除()；});});//end单击$('#gallery a:first ')。单击()；我们添加了$('#gallery a:first ')。单击()；在jQuery中，如果没有参数传递给事件函数，jQuery将触发事件一次。保存代码并在浏览器中重新打开。默认情况下，已显示第一张图片：

3.css绝对定位实现图片重叠。

美丽的相册已经基本完成，但是批判性地看，当我们改变要查看的照片时，旧照片会在新照片后面淡出，给人一种冗余和不清晰的感觉：

为了解决这个问题，我们让新图片的淡入和旧图片的淡出重叠。为了实现图片的重叠显示，需要使用css的绝对定位。

通常，当隐藏或添加新元素时，其他元素会像流一样自动移动，以填充空白或为新元素腾出空间。但是就像我们在本文中的例子一样，如果我们不想看到这种效果，我们可以使用css的绝对定位。css的绝对定位会在常规页面内容流之外放置一个元素，这样就不会在内容流中进行填充和移动等操作。如果我们使用绝对定位将元素定位在同一个位置，元素将会重叠。在这种情况下，这正是我们想要的。其实实现起来很简单，只需要在div id='bigImg'/div中指定img作为css中的绝对定位即可。我们在代码1中的/style之前添加了以下代码：

# BigIMg img { position : absolute；}保存，在浏览器中重新打开，您就完成了！制作了精美的相册。

Jquery文件下载。

以上就是本文的全部内容，希望对大家学习jquery编程有所帮助。