The effect of mouse wheel-driven image switching based on jquery _jquery

jquery can produce the same animation effect as Flash, this is absolutely beyond doubt, this article will demonstrate an example of a mouse wheel-driven image switching effect.

This example implements the effect:
the picture toggles when the mouse wheel scrolls.
Support keyboard direction key to achieve the picture switching effect.
Support Click on the picture switch, support Click on the current picture link.
The progress bar slider shows the progress of the number of picture pictures.
XHTML

<div class= "Demo" > 
 <div id= "Imageflow" > 
 <div id= "Loading" ></div> 
 <div id=" captions "></div> 
 <div id=" Images "> 
 < IMG src= "images/s1.jpg" alt= "Image1"/>   
  
 </div> 
 < Div id= "scrollbar" > 
 <div id= "Slider" ></div> 
 </div> 
 </div> 
</ Div> 

Div.demo is the outermost layer that contains all the elements required for the entire scrolling effect . #imageflow is required, and the ID name of the element that is contained within it cannot be modified, and if you do, you must first define or modify the JS code directly . #loading is used to load a picture that loads an animation, but you can also write "loading" or other text directly. The #captions is used to display the caption of a picture. #images to place the number of pictures you want to scroll through. #scrollbar is the progress bar that shows the picture. #slider is a slider that, when you switch a picture, slides to the appropriate position to show the number of pictures.
CSS

 demo {width:860px; height:300px; margin:20px auto; position:relative; background: #e8f5 Fe Overflow:hidden} #images {margin:20px 0 0 60px; width:860px} #images img {position:absolute; margin-top:-160px} #l 
oading {margin:0 color: #fff; text-align:center} #loading img {position:ralative; margin:0} #captions {position:relative; height:24px; line-height:24px; top:100px; left:320px; Background:url (images/cap_bg.png ) No-repeat Center Center; Color: #fff; Font-weight:bold; Text-align:center; z-index:10000} #scrollbar {position:relative; top:-100px height:2px; z-index:10001 background: #abcd3a URL (images/ 
Scroll.gif) Repeat-x; #slider {position:absolute; width:15px; height:4px; margin:-1px 0 0-1px; Background:url (images/bar.gif) no-repeat; z INDEX:10002} 

CSS is the whole effect of the key part of the implementation, if the CSS control is not good, will not get the effect you want.
The demo sets the width and height and sets the position:relative and Overflow:hidden to limit the scrolling effect of the mouse pulley to the. Demo. The #images sets the margin value and sets the relative positioning for the internal IMG. #captions设置了用来显示图片标题的样式, note that I use translucent picture cap_bg.png as background image, do not support transparent PNG image under IE6, so you have to do related processing. Next look at the rolling progress bar and slider settings, all the use of positioning and depth settings, why this setting, only people to slowly test will know the mystery.
Introducing jquery libraries and sliding JS files

<script type= "Text/javascript" src= "Js/jquery.js" ></script> 

All JS actions are completed in Imageflow.js, I only made a slight change, we can use directly.
Now you can see the effect. But there are still questions:
How do I get a picture connection address?
The final effect should be to click on the current display of the picture, will be connected to a page, to show the picture related to the detailed information. So how does this link address get, probably at line No. 252 start with two lines of code:

Image.url = Image.getattribute ("Longdesc"); 
Image.ondblclick = function () {document.location = This.url;} 

As you can see, the link address of the picture comes from its properties: Longdesc, when you click the picture, the page will jump to the corresponding address page. Okay, now we're back to the XHTML code that just started, just give each picture a Longdesc attribute and set the value to the corresponding page address. Such as:

Now, the task is done. After reading this example you will find that you do not need a single jquery code, because Imageflow has completed all the operation code.

The above is the entire content of this article, I hope to help you learn.