Maison > interface Web > js tutoriel > le corps du texte

code d'effet de commutation d'image de diaporama jquery Sharing_jquery

WBOY
Libérer: 2016-05-16 15:40:11
original
1535 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de changement d'image du diaporama de jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code d'effet de changement d'image de diaporama basé sur jquery, avec des vignettes et des titres, et le titre peut être personnalisé.
Opération de rendu : ---------Voir l'effet Télécharger le code source---------- ---------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
(1) Introduisez le style CSS dans la zone d'en-tête :

<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
Copier après la connexion

(2) code js :

<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT>
<SCRIPT type=text/javascript>
 // <![CDATA[
 $(document).ready(function(){
 
  if ($('#pager a').size() <= 1) {
  $('#pager').css('display', 'none');
  return;
  }
 
  var index = 0;
  var selected = null;
  var width = 756;
  
  $('#pager a').each(function(i){
  if (i == 0) {
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
  }
  $(this).click(function(){
   index = i;
   selected.find('img').attr('src', 'images/button-

view.gif');
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
   $('#images').animate({left:-(width * i)}, 500, 

'easeOutQuad');
   return false;
  });
  });
  
  $('#images').wrapInner('<a href="#" id="next"></a>');
  $('#next').click(function(){
  var a = $('#pager a').get(index + 1);
  if (!a) a = $('#pager a').get(0);
  $(a).click();
  return false;
  });
 });
 // ]]>
 </SCRIPT>
Copier après la connexion

Le code d'effet de changement d'image du diaporama jquery partagé avec vous est le suivant


幻灯片图片切换效果
<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
<SCRIPT type=text/javascript src="js/jquery-1.3.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="js/jquery.easing.1.2.js"></SCRIPT>
<SCRIPT type=text/javascript>
 // <![CDATA[
 $(document).ready(function(){
 
  if ($('#pager a').size() <= 1) {
  $('#pager').css('display', 'none');
  return;
  }
 
  var index = 0;
  var selected = null;
  var width = 756;
  
  $('#pager a').each(function(i){
  if (i == 0) {
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
  }
  $(this).click(function(){
   index = i;
   selected.find('img').attr('src', 'images/button-

view.gif');
   selected = $(this);
   selected.find('img').attr('src', 'images/button-

view-active.gif');
   $('#images').animate({left:-(width * i)}, 500, 

'easeOutQuad');
   return false;
  });
  });
  
  $('#images').wrapInner('<a href="#" id="next"></a>');
  $('#next').click(function(){
  var a = $('#pager a').get(index + 1);
  if (!a) a = $('#pager a').get(0);
  $(a).click();
  return false;
  });
 });
 // ]]>
 </SCRIPT>




Copier après la connexion

Ce qui précède est le code d'effet de changement d'image du diaporama jquery partagé avec vous. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.

É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
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal