Implementation of image switching effect driven by scroll wheel based on jquery _ jquery-js tutorial

This article mainly introduces the image Switching Effect Based on jquery for mouse wheel drive, which is easy to operate and suitable for use in production film display websites, if you need it, you can refer to jQuery to produce the animation effect comparable to that of Flash. This is beyond doubt. This article will demonstrate an image Switching Effect Based on the mouse wheel drive through an example.

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

P. 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