js-Implementierungsbeispiel für das Klicken auf die linke und rechte Schaltfläche zum Drehen von Bildern_Javascript-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt, wie Sie mit js den Effekt von Karussellbildern erzielen, indem Sie auf die linke und rechte Schaltfläche klicken. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

$(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++; 
      } 
    } 
  }); 
});

Für Effekte wie das Bewegen der Maus wird unten eine horizontale Balkenbeschreibung angezeigt, und links und rechts werden Schaltflächen angezeigt. Dies kann vollständig mit CSS erreicht werden, und es ist nicht erforderlich, js zu verwenden, um dies zu erreichen.

Spezifische Operationen: Bei der absoluten oder relativen Positionierung in CSS sind links, rechts oder unten negative Zahlen. Nach dem Bewegen der Maus werden sie korrekt angezeigt und der Übergang wird dann als Puffer für die Animation festgelegt.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.