js implementation example of clicking the left and right buttons to rotate pictures_javascript skills

The example in this article describes how to use js to achieve the effect of carousel images by clicking on the left and right buttons. Share it with everyone for your reference. The specific implementation method is 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();//图片展示区外围div的大小 
 
  //注：若为整数，前边不能再加var，否则会被提示underfine 
  p_count = $v_citemss.find("li").length;//获取此处li的个数 
  $(".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 effects such as hovering the mouse, a horizontal bar description will appear below, and buttons will appear on the left and right, it can be completely achieved with css, and there is no need to use js to achieve it.

Specific operations: In absolute or relative positioning in CSS, left, right or bottom are negative numbers. After hovering the mouse, they will be displayed correctly, and then set the transition as a buffer for the animation.

I hope this article will be helpful to everyone’s JavaScript programming design.