JS图片轮播[左右轮播][带说明]（转载）

该图片轮播对 JS图片切换[左右切换][带使用说明] 进行了升级，加上了标题动画，同样使用jQuery库，一个页面可以放置多个图片轮播。

先看一下演示：JS图片轮播[左右轮播][带使用说明]

HTML代码

1. <div class="imageRotation">
2. <div class="imageBox">
3. <a href="http://www.itxueyuan.org" target="_blank"><img src="images/1.jpg" /></a>
4. <a href="http://www.itxueyuan.org" target="_blank"><img src="images/2.jpg" /></a>
5. <a href="http://www.itxueyuan.org" target="_blank"><img src="images/3.jpg" /></a>
6. <a href="http://www.itxueyuan.org" target="_blank"><img src="images/4.jpg" /></a>
7. <a href="http://www.itxueyuan.org" target="_blank"><img src="images/5.jpg" /></a>
8. </div>
9. <div class="titleBox">
10. <p class="active"><span>第一张图片标题</span></p>
11. <p>第二张图片标题</p>
12. <p>第三张图片标</p>
13. <p>第四张图片标题</p>
14. <p>第五张图片标题</p>
15. </div>
16. <div class="icoBox">
17. <span class="active" rel="1">1</span>
18. <span rel="2">2</span>
19. <span rel="3">3</span>
20. <span rel="4">4</span>
21. <span rel="5">5</span>
22. </div>
23. </div>

说明：每个图片轮播都必须放在 class="imageRotation" 的容器中，所有图片放在 class="imageBox" 的容器中，标题放在 class="titleBox" 的容器中，图标放在 class="icoBox" 的容器中。图片、标题和图标的数目要相等。

CSS代码

1. .imageRotation{
2. height:270px;
3. width:570px;
4. overflow:hidden; /*--超出容器的所有元素都不可见--*/
5. position:relative; /*--相对定位--*/
6. border:10px solid #eee;
7. bodrer-radius:5px;
8. -webkit-border-radius:5px;
9. -moz-border-radius:5px;
10. }
11. /*-------------图片容器---------------*/
12. .imageBox{
13. position:absolute; /*--固定定位--*/
14. height:270px;
15. top:0px;
16. left:0px;
17. overflow:hidden;
18. }
19. .imageBox img {
20. display:block;
21. height:270px;
22. width:570px;
23. float:left;
24. border:none;
25. }
26. /*-------------标题容器---------------*/
27. .titleBox{
28. position:absolute; /*--固定定位--*/
29. bottom:0px;
30. width:570px;
31. height:40px;
32. overflow:hidden;
33. }
34. .titleBox p{
35. position:absolute; /*--固定定位--*/
36. bottom:-40px;
37. width:550px;
38. height:40px;
39. margin:0px;
40. padding:0px 10px;
41. line-height:40px;
42. z-index:1;
43. ">#000;
44. color:#fff;
45. font-family:"微软雅黑","yahei";
46. opacity:0.5;
47. -moz-opacity:0.5;
48. -webkit-opacity:0.5;
49. filter:alpha(opacity=50);
50. }
51. .titleBox p span{
52. opacity:1;
53. -moz-opacity:1;
54. -webkit-opacity:1;
55. filter:alpha(opacity=100);
56. }
57. .titleBox p.active{
58. bottom:0px;
59. }
60. /*-------------图标容器---------------*/
61. .icoBox{
62. position:absolute; /*--固定定位--*/
63. bottom:14px;
64. right:15px;
65. width:76px;
66. height:12px;
67. text-align:center;
68. line-height:40px;
69. z-index:2;
70. }
71. .icoBox span{
72. display:block;
73. float:left;
74. height:12px;
75. width:12px;
76. margin-left:3px;
77. overflow:hidden;
78. background:url("images/ico.png") 0px 0px no-repeat;
79. cursor:pointer;
80. }
81. .icoBox span.active {
82. background-position:0px -12px;
83. cursor:default;
84. }

说明：相对定位和绝对定位要引起注意。

JavaScript代码

1. $(document).ready(function() {
2. $(".imageRotation").each(function(){
3. // 获取有关参数
4. var imageRotation = this, // 图片轮换容器
5. imageBox = $(imageRotation).children(".imageBox")[0], // 图片容器
6. titleBox = $(imageRotation).children(".titleBox")[0], // 标题容器
7. titleArr = $(titleBox).children(), // 所有标题（数组）
8. icoBox = $(imageRotation).children(".icoBox")[0], // 图标容器
9. icoArr = $(icoBox).children(), // 所有图标（数组）
10. imageWidth = $(imageRotation).width(), // 图片宽度
11. imageNum = $(imageBox).children().size(), // 图片数量
12. imageReelWidth = imageWidth*imageNum, // 图片容器宽度
13. activeID = parseInt($($(icoBox).children(".active")[0]).attr("rel")), // 当前图片ID
14. nextID = 0, // 下张图片ID
15. setIntervalID, // setInterval() 函数ID
16. intervalTime = 4000, // 间隔时间
17. imageSpeed =500, // 图片动画执行速度
18. titleSpeed =250; // 标题动画执行速度
19. // 设置 图片容器 的宽度
20. $(imageBox).css({'width' : imageReelWidth + "px"});
21. // 图片轮换函数
22. var rotate=function(clickID){
23. if(clickID){ nextID = clickID; }
24. else{ nextID=activeID<=3 ? activeID+1 : 1; }
25. // 交换图标
26. $(icoArr[activeID-1]).removeClass("active");
27. $(icoArr[nextID-1]).addClass("active");
28. // 交换标题
29. $(titleArr[activeID-1]).animate(
30. {bottom:"-40px"},
31. titleSpeed,
32. function(){
33. $(titleArr[nextID-1]).animate({bottom:"0px"} , titleSpeed);
34. }
35. );
36. // 交换图片
37. $(imageBox).animate({left:"-"+(nextID-1)*imageWidth+"px"} , imageSpeed);
38. // 交换IP
39. activeID = nextID;
40. }
41. setIntervalID=setInterval(rotate,intervalTime);
42. $(imageBox).hover(
43. function(){ clearInterval(setIntervalID); },
44. function(){ setIntervalID=setInterval(rotate,intervalTime); }
45. );
46. $(icoArr).click(function(){
47. clearInterval(setIntervalID);
48. var clickID = parseInt($(this).attr("rel"));
49. rotate(clickID);
50. setIntervalID=setInterval(rotate,intervalTime);
51. });
52. });
53. });

以下三个配置可以更改：

复制纯文本新窗口

 

1. intervalTime = 4000, // 间隔时间
2. imageSpeed =500, // 图片动画执行速度
3. titleSpeed =250; // 标题动画执行速度

转载于:https://www.cnblogs.com/qmnx/p/5266420.html