本文實例講述了jquery的幻燈片圖片切換效果。分享給大家供大家參考。具體如下：
這是一款基于jquery的幻燈片圖片切換效果代碼，有縮略圖和標題，可以自定義標題。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
（1）在head區域引入CSS樣式：
<LINK rel=stylesheet type=text/css href="css/lrtk.css" charset=utf-8 media=screen>
（2）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>為大家分享的jquery的幻燈片圖片切換效果代碼如下
<head><title>幻燈片圖片切換效果</title><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></head><body style="text-align:center" class=work-project><DIV id=content><DIV id=project><!-- project navigation --><P id=navigation><SPAN id=pager><A href="images/1.jpg"><IMG alt=1 src="images/button-view.gif" width=12 height=19></A><A href="images/2.jpg"><IMG alt=2 src="images/button-view.gif" width=12 height=19></A><A href="images/3.jpg"><IMG alt=3 src="images/button-view.gif" width=12 height=19></A><A href="images/4.jpg"><IMG alt=4 src="images/button-view.gif" width=12 height=19></A><A href="images/5.jpg"><IMG alt=5 src="images/button-view.gif" width=12 height=19></A></SPAN></P><!-- project images --><DIV id=mask><DIV id=images><IMG src="images/1.jpg" width=756 height=518><IMG src="images/2.jpg" width=756 height=518><IMG src="images/3.jpg" width=756 height=518><IMG src="images/4.jpg" width=756 height=518><IMG src="images/5.jpg" width=756 height=518></DIV></DIV><!-- project title --></DIV></DIV></DIV></body></html>以上就是為大家分享的jquery的幻燈片圖片切換效果代碼，希望大家可以喜歡，并應用到實踐中。
新聞熱點
疑難解答
