Implementing mouse wheel driven picture switching effect based on jquery_jquery

jQuery can produce animation effects comparable to Flash. There is absolutely no doubt about this. This article will demonstrate an image switching effect based on mouse wheel drive through an example.

The effect achieved in this example:
The picture switches when the mouse wheel is scrolled.
Supports keyboard arrow keys to achieve image switching effects.
Supports clicking to switch pictures and clicking on the current picture link.
The progress bar slider shows the progress of the number of pictures.
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="Implementing mouse wheel driven picture switching effect based on jquery_jquery"><img src="images/loader.gif" alt="Implementing mouse wheel driven picture switching effect based on jquery_jquery" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo is the outermost layer and contains all the elements needed for the entire scrolling effect. #imageflow is required, and the ID name of the element contained within it cannot be modified. If you really want to modify it, you must first define or directly modify the JS code . #Implementing mouse wheel driven picture switching effect based on jquery_jquery is used to load a Implementing mouse wheel driven picture switching effect based on jquery_jquery animation image. Of course, you can also write "Implementing mouse wheel driven picture switching effect based on jquery_jquery" or other text directly. #captions is used to display the caption of the image. #imagesPlace the images you want to scroll and switch. There is no limit to the number. #scrollbar is a progress bar that displays pictures. #slider is a slider. When switching pictures, the slider will slide to the corresponding position to display the number of pictures.
CSS

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#Implementing mouse wheel driven picture switching effect based on jquery_jquery { margin:0; color:#fff; text-align:center } 
#Implementing mouse wheel driven picture switching effect based on jquery_jquery 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 key part to achieve the entire effect. If CSS is not well controlled, you will not get the effect you want.
.demo sets the width and height, and sets position:relative and overflow:hidden in order to limit the scope of the mouse wheel scrolling to the .demo. #images sets the margin value and sets the relative positioning of the internal img. #captions sets the style used to display the picture title. Note that I use the semi-transparent picture cap_bg.png as the background picture. Transparent png pictures are not supported under IE6, so you Relevant processing is required. Next, let’s look at the settings of the scrolling progress bar and slider. They all use positioning and depth settings. Why are they set like this? Only if you test them slowly will you know the secret.
Introduce jquery library and sliding js file

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script> 

All js actions are completed in imageflow.js. I only made slight changes and everyone can use it directly.
Now you can see the effect. But there is still a problem:
How to obtain the picture link address?
The final effect should be that when you click on the currently displayed image, you will be connected to a page to display detailed information related to the image. So how to get this link address? There are two lines of code starting from line 252:

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; } 

It can be seen that the link address of the picture comes from its attribute: longdesc. When the picture is clicked, the page will jump to the corresponding address page. Well, now that we're back to the XHTML code we started with, we just need to assign the longdesc attribute to each image and set the value to the corresponding web page address. Such as:

<img src="images/s1.jpg" alt="image1" longdesc="#" /> 

Now, the task is completed. After reading this example, you will find that you don't need any jquery code at all, because imageflow has already completed all the operation codes.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.