JS Implementation Click on the left and right button carousel Picture Effect example _javascript skills

This article is an example of JS to achieve the click of the right and left button Carousel Picture effect method. Share to everyone for your reference. The implementation methods are as follows:

$ (function () { 
  var index = 1; 
  var pPage = 1; 
  var $v _citemss = $ (". Citemss"); 
  var $v _show = $v _citemss.find ("ul"); 
  V_width = $v _citemss.width ()//Picture display area perimeter div size 
 
  //NOTE: If the integer, the front can not add Var, otherwise will be prompted underfine 
  p_count = $v _citemss.find ( "Li"). length;//gets the number of Li here 
  $ (". Slideprev1"). Click (function () { 
    if (! $v _show.is (": Animated")) { 
      if ( PPage = = index) { 
        $v _show.animate ({right: ' 0px '}, "3000"); 
        PPage = 4; 
      } else { 
        $v _show.animate ({right: ' = ' + v_width}, "3000"); 
        ppage-- 
      }} 
  ); 
 
  $ (". Slidenext"). Click (function () { 
    if (! $v _show.is (": Animated")) { 
      if (pPage = = P_count) { 
        $v _ Show.animate ({left: ' 0px '}, "3000"); 
        PPage = 1; 
      } else { 
        $v _show.animate ({left: ' = ' + v_width}, ' 3000 '); 
        ppage++}}}); 

For the mouse to hover up, the bottom appears horizontal bar description, the appearance of buttons and so on, can be achieved with CSS, do not need to use JS to achieve.

Specific operations: CSS absolute or relative positioning, left,right or bottom for negative numbers, the mouse hover up, respectively, the correct display, and then set the transition, as an animation buffer can be.

I hope this article will help you with your JavaScript programming.