Maison >interface Web >js tutoriel >code d'effet de commutation d'image de diaporama jquery Sharing_jquery
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>
(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>
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>