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

内容摘要
本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下：

这是一款基于jquery的幻灯片图片切换效果代码，有缩略图和标题，可以自定义标题。

运行效果图：
文章正文

本文实例讲述了jquery的幻灯片图片切换效果。分享给大家供大家参考。具体如下：
这是一款基于jquery的幻灯片图片切换效果代码，有缩略图和标题，可以自定义标题。
运行效果图：     -------------------查看效果 下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
（1）在head区域引入CSS样式：

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

（2）js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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的幻灯片图片切换效果代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<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的幻灯片图片切换效果代码，希望大家可以喜欢，并应用到实践中。
代码注释
上一篇C#防SQL注入代码的三种方法下一篇简单分析javascript面向对象与原型

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！