"JQuery Demo" picture Toggle effect Finishing

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: [email protected] and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.