jquery的幻灯片图片切换效果代码分享

本文实例讲述了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的幻灯片图片切换效果代码，希望大家可以喜欢，并应用到实践中。