JQuery-Diashow-Bildwechseleffektcode Sharing_JQuery

Das Beispiel in diesem Artikel beschreibt den Diashow-Bildwechseleffekt von jquery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein auf JQuery basierender Diashow-Bildumschalteffektcode mit Miniaturansichten und Titeln, und der Titel kann angepasst werden.
Vorgangsrendering: --------------------------------------------- --------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

(1) Führen Sie den CSS-Stil im Kopfbereich ein:

(2) js-Code:

<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>

Der mit Ihnen geteilte Jquery-Diashow-Bildwechseleffektcode lautet wie folgt

<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>

Das Obige ist der mit Ihnen geteilte jquery-Diashow-Bildwechseleffektcode. Ich hoffe, dass er Ihnen gefällt und Sie ihn in der Praxis anwenden können.