Maison > interface Web > js tutoriel > js exemple d'implémentation consistant à cliquer sur les boutons gauche et droit pour faire pivoter les compétences pictures_javascript

js exemple d'implémentation consistant à cliquer sur les boutons gauche et droit pour faire pivoter les compétences pictures_javascript

WBOY
Libérer: 2016-05-16 16:17:07
original
1377 Les gens l'ont consulté

L'exemple de cet article décrit comment utiliser js pour obtenir l'effet d'images carrousel en cliquant sur les boutons gauche et droit. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

$(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++; 
      } 
    } 
  }); 
});
Copier après la connexion

Pour les effets tels que le survol de la souris, une description de barre horizontale apparaîtra ci-dessous et des boutons apparaîtront à gauche et à droite, cela peut être complètement réalisé avec CSS, et il n'est pas nécessaire d'utiliser js pour y parvenir.

Opérations spécifiques : En positionnement absolu ou relatif en CSS, gauche, droite ou bas sont des nombres négatifs Après avoir survolé la souris, ils s'afficheront correctement, puis définiront la transition comme tampon pour l'animation.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal