Heim > Web-Frontend > js-Tutorial > JQuery-Diashow-Bildwechseleffektcode Sharing_JQuery

JQuery-Diashow-Bildwechseleffektcode Sharing_JQuery

WBOY
Freigeben: 2016-05-16 15:40:11
Original
1563 Leute haben es durchsucht

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>
Nach dem Login kopieren


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>
Nach dem Login kopieren


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.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage