您的位置: 首页  >  IT文章  >  JS图片轮播[左右轮播][带说明]（转载）

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

分类: IT文章 • 2023-10-27 15:39:26

该图片轮播对 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. 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. 570px;
  23. float:left;
  24. border:none;
  25. }
  26. /*-------------标题容器---------------*/
  27. .titleBox{
  28. position:absolute; /*--固定定位--*/
  29. bottom:0px;
  30. 570px;
  31. height:40px;
  32. overflow:hidden;
  33. }
  34. .titleBox p{
  35. position:absolute; /*--固定定位--*/
  36. bottom:-40px;
  37. 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. 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. 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; // 标题动画执行速度

相关推荐