• 售前

  • 售后

热门帖子
入门百科

原生JavaScript实现轮播图

[复制链接]
波罗密心经 显示全部楼层 发表于 2021-10-25 19:27:48 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下
效果:

代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul,
  12. li {
  13. list-style: none;
  14. }
  15. .banner {
  16. width: 1200px;
  17. height: 535px;
  18. border: 1px solid red;
  19. margin: 0 auto;
  20. position: relative;
  21. }
  22. .slider li {
  23. position: absolute;
  24. left: 0;
  25. top: 0;
  26. }
  27. a {
  28. width: 40px;
  29. height: 50px;
  30. background-color: rgba(0, 0, 0, 0.1);
  31. font-size: 50px;
  32. text-align: center;
  33. line-height: 50px;
  34. position: absolute;
  35. text-decoration: none;
  36. color: gray;
  37. }
  38. .btnl {
  39. left: 0;
  40. top: 50%;
  41. margin-top: -15px;
  42. }
  43. .btnr {
  44. right: 0;
  45. top: 50%;
  46. margin-top: -25px;
  47. }
  48. .tabs {
  49. position: absolute;
  50. bottom: 20px;
  51. left: 50%;
  52. margin-left: -75px;
  53. }
  54. .tabs li {
  55. width: 15px;
  56. height: 15px;
  57. background-color: #ccc;
  58. border-radius: 50%;
  59. float: left;
  60. margin-right: 10px;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="banner">
  66. <ul class="slider">
  67. <li><img src="img/b1.jpg" alt="" /></li>
  68. <li><img src="img/b2.jpg" alt="" /></li>
  69. <li><img src="img/b3.jpg" alt="" /></li>
  70. <li><img src="img/b4.jpg" alt="" /></li>
  71. <li><img src="img/b5.jpg" alt="" /></li>
  72. <li><img src="img/b6.jpg" alt="" /></li>
  73. </ul>
  74. <a href="javascript:void(0);" class="btnl">
  75. <</a>
  76. <a href="javascript:void(0);" class="btnr">></a>
  77. <ul class="tabs">
  78. <li></li>
  79. <li></li>
  80. <li></li>
  81. <li></li>
  82. <li></li>
  83. <li></li>
  84. </ul>
  85. </div>
  86. <script type="text/javascript">
  87. var banner = document.getElementsByClassName("banner")[0];
  88. var slider = document.getElementsByClassName("slider")[0];
  89. var li = slider.getElementsByTagName("li");
  90. var btnl = document.getElementsByClassName("btnl")[0];
  91. var btnr = document.getElementsByClassName("btnr")[0];
  92. var tabs = document.getElementsByClassName("tabs")[0];
  93. var btns = tabs.getElementsByTagName("li");
  94. //初始化
  95. btns[0].style.backgroundColor = "red";
  96. for(var i = 0; i < li.length; i++) {
  97. if(i == 0) {
  98. continue;
  99. } else {
  100. li[i].style.opacity = 0;
  101. }
  102. }
  103. var timer = setInterval(mover, 1000);
  104. //声明一个变量,代表当前图片的下标
  105. var num = 0;
  106. function mover() {
  107. num++;
  108. if(num == li.length) {
  109. num = 0;
  110. }
  111. for(var i = 0; i < li.length; i++) {
  112. li[i].style.opacity = 0;
  113. btns[i].style.backgroundColor = "#ccc";
  114. }
  115. li[num].style.opacity = 1;
  116. btns[num].style.backgroundColor = "red";
  117. }
  118. function movel() {
  119. num--;
  120. if(num == -1) {
  121. num = li.length - 1;
  122. }
  123. for(var i = 0; i < li.length; i++) {
  124. li[i].style.opacity = 0;
  125. btns[i].style.backgroundColor = "#ccc";
  126. }
  127. li[num].style.opacity = 1;
  128. btns[num].style.backgroundColor = "red";
  129. }
  130. banner.onmouseover = function() {
  131. clearInterval(timer)
  132. }
  133. banner.onmouseout = function() {
  134. timer = setInterval(mover, 1000)
  135. }
  136. btnl.onclick = function(e) {
  137. movel();
  138. }
  139. btnr.onclick = function(e) {
  140. mover();
  141. }
  142. // 小圆点效果
  143. for(var i = 0; i < btns.length; i++) {
  144. btns[i].index = i;
  145. btns[i].onmouseover = function() {
  146. if(this.index == num) {
  147. return;
  148. } else {
  149. for(var i = 0; i < li.length; i++) {
  150. li[i].style.opacity = 0;
  151. btns[i].style.backgroundColor = "#ccc";
  152. }
  153. li[this.index].style.opacity = 1;
  154. btns[this.index].style.background="red";
  155. num=this.index;
  156. }
  157. }
  158. }
  159. </script>
  160. </body>
  161. </html>
复制代码
以上就是本文的全部内容,盼望对大家的学习有所资助,也盼望大家多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作