本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下：
这是一款基于jquery的幻灯片图片切换效果代码，有缩略图和标题，可以自定义标题。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
（1）在head区域引入CSS样式：
<LINK rel=stylesheet type=text/css href="https://www.jb51.net/css/lrtk.css" charset=utf-8 media=screen>
（2）js代码：
<SCRIPT type=text/javascript src="https://www.jb51.net/js/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type=text/javascript src="https://www.jb51.net/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="#"></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="https://www.jb51.net/css/lrtk.css" charset=utf-8 media=screen> <SCRIPT type=text/javascript src="https://www.jb51.net/js/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type=text/javascript src="https://www.jb51.net/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="#"></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 class=work-project> <DIV id=content> <DIV id=project><!-- project navigation --> <P id=navigation><SPAN id=pager> <A href="https://www.jb51.net/images/1.jpg"><IMG alt=1 src="https://www.jb51.net/images/button-view.gif" width=12 height=19></A> <A href="https://www.jb51.net/images/2.jpg"><IMG alt=2 src="https://www.jb51.net/images/button-view.gif" width=12 height=19></A> <A href="https://www.jb51.net/images/3.jpg"><IMG alt=3 src="https://www.jb51.net/images/button-view.gif" width=12 height=19></A> <A href="https://www.jb51.net/images/4.jpg"><IMG alt=4 src="https://www.jb51.net/images/button-view.gif" width=12 height=19></A> <A href="https://www.jb51.net/images/5.jpg"><IMG alt=5 src="https://www.jb51.net/images/button-view.gif" width=12 height=19></A> </SPAN></P> <!-- project images --> <DIV id=mask> <DIV id=images> <IMG src="https://www.jb51.net/images/1.jpg" width=756 height=518><IMG src="https://www.jb51.net/images/2.jpg" width=756 height=518><IMG src="https://www.jb51.net/images/3.jpg" width=756 height=518><IMG src="https://www.jb51.net/images/4.jpg" width=756 height=518><IMG src="https://www.jb51.net/images/5.jpg" width=756 height=518></DIV></DIV><!-- project title --> </DIV></DIV> </DIV> </body> </html>
以上就是为大家分享的jquery的幻灯片图片切换效果代码，希望大家可以喜欢，并应用到实践中。
您可能感兴趣的文章: