JQuery focus chart conversion-left and right jquery focus Conversion
1 <! Doctype html> 2 // Click the next button 43 $ (". pic-show. next "). click (function (event) {44 if (num <3) {45 num = num + 1; 46} 47 else {48 num = 0; 49} 50 console. log (num); 51 var mlNum = num *-480 + 'px '; 52 $ (". pic "). animate ({"margin-left": mlNum}, 1000) 53 $ ("ul li: eq (" + num + ") "). addClass ("aCss "). parent (). siblings (). find (""). removeClass ("aCss"); 54 event. preventDefault (); 55 var txt = $ ("ul li "). eq (num ). find (""). attr ("title"); 56 console. log (txt); 57 $ ("p "). text (txt); 58 })
// Click the prev button 59 $ (". pic-show. prev "). clicking (function (event) {60 if (num> 0) {61 num = num-1; 62} 63 else {64 num = 3; 65} 66 console. log (num); 67 var mlNum2 = num *-480 + 'px '; 68 $ (". pic "). animate ({"margin-left": mlNum2}, 1000) 69 $ ("ul li "). eq (num ). find (""). addClass ("aCss "). parent (). siblings (). find (""). removeClass ("aCss"); 70 event. preventDefault (); 71 var txt = $ ("ul li "). eq (num ). find (""). attr ("title"); 72 console. log (txt); 73 $ ("p "). text (txt); 74}) 75 $ ("ul li "). click (function (event) {76 num = $ (this ). parent (). index (); 77 var mlNum3 = num *-480 + 'px '; 78 $ (". pic "). animate ({"margin-left": mlNum3}, 500) 79 80 $ (this ). addClass ("aCss "). parent (). siblings (). find (""). removeClass ("aCss"); // addClass 81 event. preventDefault (); 82 83 var txt = $ (this ). attr ("title"); 84 console. log (txt); // 85 $ ("p") for testing "). text (txt); 86}) 87 </script> 88 89 </body> 90
To convert between left and right, you need to change the image while converting between left and right. (num = index; that is, the red part .), For details, see the code.