jquery mouse wheel to achieve image switching

This time I will bring you the jquery mouse wheel to implement picture switching. What are the precautions for jquery mouse wheel to implement picture switching? The following is a practical case, let's take a look.

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

XHTML

<p class="demo"> 
 <p id="imageflow"> 
 <p id="loading"><img src="images/loader.gif" alt="loading" /></p> 
 <p id="captions"></p> 
 <p 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" /> 
 </p> 
 <p id="scrollbar"> 
 <p id="slider"></p> 
 </p> 
 </p> 
</p>

p.demo is the outermost layer and contains all the necessary components for the entire scrolling effect. All elements . #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. #loading is used to load a loading animation image. Of course, you can also write "loading" or other text directly. #captions is used to display the title of the picture. #imagesPlace the pictures you want to scroll and switch, the number is not limited. #scrollbar is the 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 } 
#loading { 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 key part to achieve the entire effect. If CSS is not well controlled, you will not get what you want. Effect.
.demoSet the width and height, and set position:relative and overflow:hidden in order to limit the scope of the mouse wheel scrolling to the .demo. #images Set the margin value and set 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. Introducing the jquery library and sliding js files

<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 you can use them directly.

Now you can see the effect. But there is still a question:

How to obtain the image connection 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 It 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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Tab scroll navigation switching implementation (with code)

jquery background image switching (with code attached) Code)

The above is the detailed content of jquery mouse wheel to achieve image switching. For more information, please follow other related articles on the PHP Chinese website!