基于jquery实现鼠标滚轮驱动的图片切换效果

毫无疑问，jQuery可以产生媲美Flash的动画效果。本文将通过一个例子演示基于鼠标滚轮驱动的图像切换效果。

这个例子的效果是：当鼠标滚轮滚动时，图片被切换。支持键盘方向键，实现画面切换效果。单击图片开关，然后单击当前图片链接。进度条滑块显示图片数量的进度。可扩展的超文本标记语言

div class=' demo ' div id=' imageflow ' div id=' loading ' img src=' http : images/loader . gif ' alt=' loading '/div div id='题注'/div div id=' images ' img src=' http : images/S1 . jpg ' alt=' images 1 '/img src=' http : images/S2 . jpg ' alt=' image2 '/img src=' http : images/S3#imageflow是必需的，不能修改其中包含的元素的ID名。如果真的要修改，必须先定义或者直接修改JS代码。#loading用于加载动画图片。当然也可以直接写‘装’或者其他的字。#题注用于显示图片的题注。# imagesPlace使用无限数量的图片进行滚动和切换。#scrollbar是显示图片的进度条。#slider是一个滑块。切换图片时，滑块滑动到相应的位置，显示图片数量的位置。半铸钢钢性铸铁(Cast Semi-Steel)。演示{ width:860px高度：300 px；margin:20px汽车；位置：相对；背景# e8f5feoverflow : hidden } # images { margin 336020 px 0 0 60px；width :860 px } # images img { position : absolute；margin-top :-160 px } # loading { margin :0；color: # ffftext-align : center } #正在加载img { position:ralativemargin:0 } #题注{ position:relativeheight:24px线高：24 px；top:100pxleft:320pxbackground : URL(images/cap _ BG . png)无重复中心中心；color: # ffffont-weight : bold；文本对齐：居中；z-index :10000 } # scroll bar { position : relative；top :-100 px；height:2pxz-index :10001 background : # abcd3a URL(images/scroll . gif)repeat-x；} # slider { position : absolute；宽度：15 px；height:4pxmargin :-1px 0 0-1px；background : URL(images/bar . gif)不重复；Z-index:10002} CSS是整个效果实现的关键部分。如果CSS控制不好，就不会得到想要的效果。的宽度和高度。设置演示，并设置位置：相对和飞越：隐藏。目的是将鼠标滑轮的滚动范围限制为。演示。#images设置边距值，并设置内部img的相对位置。#题注设置用于显示图片标题的样式。请注意，我用的是半透明图片cap_bg.png作为背景图片，IE6下不支持透明png图片，你要处理一下。接下来，让我们看看滚动进度条和滑块的设置，它们都使用定位和深度设置。为什么要把它们设置成这样？只有当你慢慢测试它们的时候，你才会知道这个秘密。介绍jquery库和滑动js文件。

脚本类型=' text/JAVAScript ' src=' http : js/jquery . js '/script script类型=' text/JAVAScript ' src=' http 3360 js/imageflow.js '/script所有的js动作都是在imageflow . js中完成的，但是我只做了细微的改动，所以可以直接使用。现在你可以看到效果了。但还是有一个问题：如何获取图片连接地址？最后的效果应该是，当你点击当前显示的图片时，你将连接到一个页面，用于显示与图片相关的详细信息。那么如何获取这个链接地址呢，在第252行的开头有两行代码：

image . URL=image . GetAttribute(' long desc ')；image . ondblclick=function(){ document . location=this . URL；}可见图片的链接地址来源于其属性：longdesc。当你点击图片时，页面会跳转到相应的地址页面。现在让我们回到开头的XHTML代码，只需为每个图片指定longdesc属性，并将该值设置为相应的网页地址。例如：

img src=' http : images/S1 . jpg ' alt=' image 1 ' long desc=' # '/现在，任务完成。读完这个例子，你会发现你根本不需要jquery代码，因为imageflow已经完成了所有的操作代码。

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