The effect of _jquery on the image switching of the left and right button clicks based on jquery

jquery can produce the same animation effect as Flash, this is absolutely beyond doubt, this article will demonstrate an example of a left-right button click on the picture switching effect.

First, the final effect

Second, functional analysis
1. Demand analysis
Click on the left Pre button to display the previous three pictures, click the Next button on the right to display a group of (three) pictures. Initialization shows only the Next button, and the last group shows only the pre button, and the middle procedure displays both buttons.
2. HTML Structure Analysis

 <div class= "Activity" id= "Activity-slide" >
  <a href= "javascript:void (0)" class= "Pg_left ps_pre" >< /a>
  <a href= "javascript:void (0)" class= "Pg_right ps_next" ></a>
   <ul class= "Clearfix" >
   <li><a href= "javascript:;" ></a></li>
   <li><a href= "javascript:;" ></a></li>
   <li><a href= "javascript:;" ></a></li>
   <li><a href= "javascript:;" ></a></li>
   <li><a href= "javascript:;" ></a></li>
  </ul>
</div>

#activity-slide is the entrance to the entire slide, which is then invoked as a parameter to invoke the slideshow function.

Two buttons Ps_pre and Ps_next will add click event Response to switch function.

3. Functional analysis
Because the left and right switches are three for a group of switches, if the total number of Li is not a multiple of 3, you need to increase the Li node fill.

The number of LI nodes that need to be appended
var addli = 0;
A group of switching 3 Li
var num=3;
var lisize = A.find ("ul li"). Size ()///Get Li number

//Determine the number of LI nodes that need to be added
var reminder=lisize%num;
if (lisize%num!=0) {addli = Num-reminder;}
Else{addli = 0;}
Addlist ();

Above is to determine the number of lisize that need to be appended, and then call Addlist append.

Addlist as follows, starting with the first Li of the UL copy, a few need to replicate several nodes appended. The width of the UL is recalculated after the node has been appended.

 function Addlist () {for
   (i=0;i<addli;i++) {
    var html = a.find (' ul li '). EQ (i). html ();
    A.find ("ul"). Append ("<li>" +html+ "</li>");
   A.find ("ul"). CSS ({"width":(w_li+margin_li*2) * (Lisize+addli)});
  

Now the preparations have been completed. The next step is to add a response event to the button. When the slide switch involves the display and hiding of the left and right buttons, this button is displayed first, and it is btnshow as a function.

 /***
  parameter Description:
  Now: The current group, the default is 0
  C: A total of several groups
  D: Number of Li during initialization
  e: Each group shows Li number
  ***/
  function Btnshow (now , c,d,e) {
   if (d<=e) {//If the number of Li in the initialization is less than a group of numbers to display, the pre and Next button
    A.find (". Ps_next") are not displayed. Hide ();
    A.find (". Ps_pre"). Hide ();
   else if (now==0) {//Initialize now=0, display the first group, showing only next
    a.find (". Ps_next"). Show ();
    A.find (". Ps_pre"). Hide (); 
   else if (now==c-1) {//display to the last group, show only the pre
    a.find (". Ps_next"). Hide ();
    A.find (". Ps_pre"). Show (); 
   else{//Displays the middle group, and the pre and next all need to display
    a.find (". Ps_next"). Show ();
    A.find (". Ps_pre"). Show ();
   }
  

Next slide switch. Here A is the incoming parameter, which is #activity-slide. Add a response to the pre and next below it.

Forward a group, the number of groups now minus one, now is a few, let the UL Margin-left to a negative several times the group width (that is, 3 times times (li width +margin width), and then display for the button.

Slide backward a group of Li.

 function PhotoScroll () {
   a.find (". Ps_pre"). On ("click", Function () {//console.log (num); 
    now--;
    if (now >= 0) {     
     a.find ("ul"). Animate ({"Margin-left":-now*num* (W_li+margin_li*2)});
     Btnshow (Now,parseint (Lisize+addli)/num), lisize,num);
    }
   );

   A.find (". Ps_next"). On ("click", Function () {//console.log (num); 
    now++;
    if (now < (LISIZE+ADDLI)/num) { 
     a.find ("ul"). Animate ({"Margin-left":-now*num* (W_li+margin_li*2)});
     Btnshow (Now,parseint (Lisize+addli)/num), lisize,num);
    } 
   ); 
   Btnshow (Now,parseint (Lisize+addli)/num), lisize,num);  
  

Third, the instance code
1, use the picture

2. Complete code

<! DOCTYPE html>  

CSS section:

@charset "Utf-8"; Body, Div, H1, H2, H3, H4, H5, H6, HR, P, blockquote, DL, DT, DD, UL, OL, Li, Pre, code, form, FieldSet, Legend, button, T Extarea, table, Tbody, TFOOT, THEAD, TH, TD, Article, aside, dialog, figure, footer, Header, Hgroup, menu, nav, section, T IME, mark, audio, video {margin:0; padding:0 outline:nonebackground:transparent;} article, aside, dialog, figure, Foo ter, header, Hgroup, nav, section {display:block;} body, button, input, select, textarea {font:12px/1.5 arial, \5b8b\ 4f53, Sans-serif;  H1, H2, H3, H4, H5, H6, button, input, select, textarea {font-size:100%; Outline:none} address, cite, DFN, EM, var { Font-style:normal; Code, KBD, Pre, Samp {font-family:courier new, Courier, Monospace;} small {font-size:12px;} ul, Ol, Li {list-styl E:none; img {Border:none} a {text-decoration:none; Outline:thin none;} a:hover {text-decoration:underline;} table {b Order-collapse:collapse; border-spacing:0; }. Clear {Clear:both; Clearfix:after {visibility:hidden; display:block; font-size:0; content: ""; Clear:both; height:0; } HTML {-webkit-text-size-adjust:none;} body {font:12px/1.5 \5fae\8f6f\96c5\9ed1, Tahoma, Arial, \5b8b\4f53, Sans-ser If }. grid-960. wapper {width:100%; min-width:960px;height:auto; margin:0 auto; Background:url (. /images/bg-body-960.jpg) no-repeat Center top; }. grid-1180. wapper {width:100%; min-width:1180px;height:auto; margin:0 auto; Background:url (. /images/bg-body-1180.jpg) no-repeat Center top; }. grid-1410. wapper {width:100%; min-width:1410px;height:auto; margin:0 auto; Background:url (. /images/bg-body-1410.jpg) no-repeat Center top; }/* Hot Activities/grid-960. Section {width:960px margin:0 auto;background-color: #eaf2ff;} grid-1180. Section {width:118 0px;
margin:0 auto;background-color: #eaf2ff;}

. grid-1410. section {width:1410px; margin:0 auto;background-color: #eaf2ff;} . title{padding:0 102px;height:70px;line-height:70px;font-size:24px;font-weight:nOrmal;color: #fff text-shadow:0 3px #df2828, 3px 0 #df2828 background: #cc2223 URL (...

/images/bg-title.jpg) no-repeat left top;} . viewall:hover{text-decoration:none; viewall{font-size:18px;;

Color: #fff text-shadow:0 3px #df2828, 3px 0 #df2828 float:right; . grid-1410. title {padding:0 116px;background-image:url (..

/images/bg-title-1410.jpg);} . grid-960. contentwrap{width:800px;margin:0 auto; grid-1180. contentwrap{width:980px;margin:0 auto; grid-1410.

contentwrap{width:1180px;margin:0 Auto;} . grid-960. activity{width:826px;height:152px;overflow:hidden;margin:0 auto;position:relative; grid-1180. activity{width:1020px;height:192px;overflow:hidden;margin:0 auto;position:relative. grid-1410. activity{width

: 1230px;height:232px;overflow:hidden;margin:0 auto;position:relative;} . grid-960. Activity Ul{height:152px;overflow:hidden; grid-1180. activity Ul{height:192px;overflow:hidden;}.

grid-1410. Activity Ul{height:232px;overflow:hidden;} . Activity Li img{display:block;width:100%; height:100%;}

. Activity Li{display:block;float:left;} . grid-960. Activity li{width:250px;height:125px;overflow:hidden;margin:12px; grid-1180. Activity li{width:300px;
height:150px;overflow:hidden;margin:20px;} . grid-1410. Activity li{width:360px;height:180px;overflow:hidden;margin:25px;/*js Toggle/Pg_left,.pg_right {
Position:absolute;z-index:999;width:35px;height:50px;overflow:hidden;} . pg_right {background:transparent URL (..
/images/pg_right.png) no-repeat scroll 5px 7px; . pg_right:hover {background:transparent URL (..
/images/hover.png) no-repeat scroll 0 0;} . grid-960. pg_right{top:75px;right:16px;margin-top:-25px. grid-1180. pg_right{top:95px;right:20px;margin-top:-
25px;}

. grid-1410. pg_right{top:115px;right:25px;margin-top:-25px; . pg_left {background:transparent URL (..
/images/pg_left.png) no-repeat scroll 5px 7px; . pg_left:hover {background:transparent URL (..
/images/hover.png) No-repeat scroll right 0;} . grid-960. pg_left{top:75px;left:13px;margin-top:-25px; grid-1180. pg_left{top:95px;left:20px;margin-top:-25px; grid-1410. pg_left{top:115px;left:25px;margin-top:-25px;}
 

The above is the entire content of this article, I hope to help you learn.