Implement image switching effect driven by the mouse wheel based on jquery.

Implement image switching effect driven by the mouse wheel based on jquery.

JQuery can produce an animation effect comparable to Flash, which is beyond doubt. This article will demonstrate an image Switching Effect Based on the mouse wheel drive through examples.

In this example, the effect is as follows:
When the scroll wheel is clicked, the image is switched.
Supports keyboard arrow keys for image switching.
You can switch between click images and click the current image link.
The progress bar slider shows the progress of the number of images.
XHTML

<div class="demo">  <div id="imageflow">  <div id="loading"></div>  <div id="captions"></div>  <div id="images">          </div>  <div id="scrollbar">  <div id="slider"></div>  </div>  </div> </div> 

Div. demoIs the outermost layer, containing all elements required for the overall scrolling Effect. # ImageflowIs required, and the ID name of the element contained in it cannot be modified. If you want to modify it, you must first define or directly modify the JS Code.. # LoadingFor loading an animated image, you can also directly write it as "loading" or other text.# CaptionsDisplays the title of an image.# ImagesThe number of images to be switched over is unlimited.# ScrollbarDisplays the progress bar of an image.# SliderIs a slider. When switching an image, the slider slides to the corresponding position to display the number of images.
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 } 

CSSIs the key part of the overall effect implementation. If CSS control is not good, you will not get the effect you want.
. DemoThe width and height are set, and position: relative and overflow: hidden are set to restrict the scroll range of the mouse pulley to. demo.# ImagesSet the margin value and set relative positioning for the internal img. # The captions settings are used to display the image title. Note that I use a translucent image.Cap_bg.pngAs a background image, IE6 does not support transparent png images, so you need to process the image. Next, let's take a look at the settings of the scroll progress bar and slider. the positioning and depth settings are used. Why do we need to set this setting? You will only know the details of this setting when you test it slowly.
Introduce jquery library and slide 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 you can use them directly.
Now you can see the effect. But there are still problems:
How can I obtain the image connection address?
The final result should be that when you click on the currently displayed image, a page is connected to display the detailed information about the image. The following two lines of code are available at the beginning of line 252nd:

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

It can be seen that the link address of the image comes from its property: longdesc. When you click an image, the page will jump to the corresponding address page. Now let's go back to the starting XHTML code. We only need to specify the longdesc attribute for each image and set the value to the corresponding webpage address. For example:

Now the task is complete. After reading this example, you will find that you do not need any jquery code at all, because imageflow has completed all the operation code.

The above is all the content of this article, hoping to help you learn.