Pictures have a lot of switching effect, more common have horizontal scrolling, vertical scrolling, fading, and so on. We're going to do it all the next.
1. Horizontal scrolling
1) Let's implement the HTML page first, the code is simple:
<DivID= "Container"> <ulclass= "Slider"> <Li><imgsrc=".. /imgs/girls/04.png "/></Li> <Li><imgsrc=".. /imgs/girls/05.jpg "/></Li> <Li><imgsrc=".. /imgs/girls/14.jpg "/></Li> <Li><imgsrc=".. /imgs/girls/17.jpg "/></Li> <Li><imgsrc=".. /imgs/girls/20.jpg "/></Li> </ul> <ulclass= "thumb"> <Li>1</Li> <Li>2</Li> <Li>3</Li> <Li>4</Li> <Li>5</Li> </ul></Div>
2) Then we set the following CSS:
/** CSS Reset **/body, H1, H2, H3, H4, H5, H6, HR, P, blockquote, DL, DT, DD, UL, OL, Li, Pre, form, fieldset, Legend, button, input, t Extarea, TH, TD{margin:0;padding:0; }body, button, input, select, textarea{Font:12px/1.5 Tahoma, Arial, \5b8b\4f53; }H1, H2, H3, H4, H5, H6{font-size:100%; }address, cite, DFN, EM, var{Font-style:Normal; }code, KBD, pre, Samp{font-family:Couriernew, Courier, Monospace; }Small{font-size:12px; }UL, Ol{List-style:None; }a{text-decoration:None; }a:hover{text-decoration:Underline; }sup{vertical-align:Text-top; }Sub{vertical-align:Text-bottom; }legend{Color:#000; }fieldset, img{Border:0; }button, input, select, textarea{font-size:100%; }Table{Border-collapse:collapse;border-spacing:0; }/*Container*/#container{width:320px;Height:456px;Overflow:Hidden;position:relative;margin:20px Auto; }. Slider{position:Absolute; }. Slider img{width:320px;Display:Block; }. Thumb{position:Absolute;Bottom:5px; Right:5px; }. Thumb Li{float: Left;Color:#FF7300;text-align:Center;Line-height:16px;width:16px;Height:16px;font-size:12px;font-family:Arial;margin:3px 1px;Border:1px solid #FF7300;background:#fff;cursor:Pointer; }. Thumb Li:hover,.thumb li.selected{Color:#fff;Line-height:16px;width:16px;Height:16px;font-size:16px;background:#EF7300;Font-weight:Bold; }
The current display results are as follows:
3) Next, we need to click on the implementation of the image switch, the following is the implementation of the horizontal scrolling effect of the jquery plugin:
;(function($) {$.fn.extend ({scrollhorizontal:function () { varImgcount = $ (". Slider Li"). length; varImgWidth = $ (". Slider li"). EQ (0). width (); $(". Thumb li"). EQ (0). addclass ("Selected"); for(vari=0;i){ $(". Slider Li"). EQ (i). css ({"Left": i*imgwidth+ "px", "Position": "Absolute" }); } //Initialize$ (". Thumb li"). Click (function () { varTheindex = $ ( This). index (); varNowindex = $ (". Selected"). index (); varLeftwidth = imgwidth* (nowindex-theindex); $(". Thumb li"). Removeclass ("selected").); $(". Thumb li"). EQ (theindex). AddClass ("Selected"); $(". Slider Li"). Animate ({left: "+ =" +leftwidth}); }); } });}) (jQuery);
4) Finally, we call this plugin on the HTML page:
< Script > $ (document). Ready (function () { $ ("#container" ). Scrollhorizontal (); }) </ Script >
5) This effect comes out:
2. Vertical scrolling
The horizontal scrolling is achieved, and the vertical scrolling is simple. By getting the height of the picture, and then controlling the top value, you can. The new jquery plugin is as follows:
;(function($) {$.fn.extend ({scrollvertical:function () { varImgcount = $ (". Slider Li"). length; varImgHeight = $ (". Slider li"). EQ (0). Height (); $(". Thumb li"). EQ (0). addclass ("Selected"); for(vari=0;i){ $(". Slider Li"). EQ (i). css ({"Top": i*imgheight+ "px", "Position": "Absolute" }); } //Initialize$ (". Thumb li"). Click (function () { varTheindex = $ ( This). index (); varNowindex = $ (". Selected"). index (); varTopheight = imgheight* (nowindex-theindex); $(". Thumb li"). Removeclass ("selected").); $(". Thumb li"). EQ (theindex). AddClass ("Selected"); $(". Slider Li"). Animate ({top: "+ =" +topheight}); }); } });}) (jQuery);
Then call this plugin to do it:
< Script > $ (document). Ready (function () { $ ("#container" ). scrollvertical (); }) </ Script >
The effect is as follows:
3. Fade in and fade out
The same fade-in is also very well implemented:
;(function($) {$.fn.extend ({fadeinout:function () { varImgcount = $ (". Slider Li"). length; varImgHeight = $ (". Slider li"). EQ (0). Height (); $(". Thumb li"). EQ (0). addclass ("Selected"); for(vari=1;i){ $(". Slider Li"). EQ (i). css ({"Display": "None" }); } $(". Thumb li"). Click (function () { varTheindex = $ ( This). index (); varNowindex = $ (". Selected"). index (); $(". Thumb li"). Removeclass ("selected").); $(". Thumb li"). EQ (theindex). AddClass ("Selected"); $(". Slider Li"). EQ (nowindex). FadeOut (); $(". Slider Li"). EQ (theindex). FadeIn (); }); } });}) (jQuery);
The effect is as follows:
"JQuery Demo" picture Toggle effect Finishing