经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript滚动轮播图制作原理详解
来源:jb51  时间:2022/3/29 16:18:18  对本文有异议

本文实例为大家分享了JavaScript滚动轮播图制作原理,供大家参考,具体内容如下

滚动轮播图

滚动轮播图布局关键:是所有图片并排在一起,所以unit的宽要足够宽。
克隆第一张图片追加到最后一张
右按钮拉动策略:先拉动,再瞬移
左按钮拉动策略:先瞬移,再拉动
与呼吸轮播图一样,需要做防流氓策略

复制代码:将我代码中的图片更换为你的图片,注意图片路径,还需要引入js库,我引入的是jquery-1.12.3.min.js的版本,需要js这个库的同学可以去我上传的资料中下载,引入的时候注意路径

举例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. ?? ?<meta charset="UTF-8">
  5. ?? ?<title>Document</title>
  6. ?? ?<style type="text/css">
  7. ?? ??? ?* {
  8. ?? ??? ??? ?margin: 0;
  9. ?? ??? ??? ?padding: 0;
  10. ?? ??? ?}
  11. ?? ??? ?ul, ol {
  12. ?? ??? ??? ?list-style: none;
  13. ?? ??? ?}
  14. ?? ??? ?a {
  15. ?? ??? ??? ?text-decoration: none;
  16. ?? ??? ?}
  17. ?? ??? ?.carousel {
  18. ?? ??? ??? ?width: 560px;
  19. ?? ??? ??? ?height: 300px;
  20. ?? ??? ??? ?margin: 50px auto;
  21. ?? ??? ??? ?border: 5px solid red;
  22. ?? ??? ??? ?position: relative;
  23. ?? ??? ??? ?overflow: hidden;
  24. ?? ??? ?}
  25. ?? ??? ?/* 滚动轮播图布局关键,是所有图片并排在一起
  26. ?? ??? ??? ?unit的宽要足够宽
  27. ?? ??? ? */
  28. ?? ??? ? .carousel .unit {
  29. ?? ??? ? ?? ?position: absolute;
  30. ?? ??? ? ?? ?width: 9999px;
  31. ?? ??? ? ?? ?left: 0;
  32. ?? ??? ? ?? ?top: 0;
  33. ?? ??? ? }
  34. ?? ??? ? .carousel .unit li {
  35. ?? ??? ? ?? ?float: left;
  36. ?? ??? ? ?? ?width: 560px;
  37. ?? ??? ? ?? ?height: 300px;
  38. ?? ??? ? }
  39. ?? ??? ? .btns a {
  40. ?? ??? ? ?? ?position: absolute;
  41. ?? ??? ? ?? ?width: 30px;
  42. ?? ??? ? ?? ?height: 60px;
  43. ?? ??? ? ?? ?top: 50%;
  44. ?? ??? ? ?? ?margin-top: -30px;
  45. ?? ??? ? ?? ?background-color: rgba(0, 0, 0, .5);
  46. ?? ??? ? ?? ?color: #fff;
  47. ?? ??? ? ?? ?font-size: 20px;
  48. ?? ??? ? ?? ?line-height: 60px;
  49. ?? ??? ? ?? ?text-align: center;
  50. ?? ??? ? }
  51. ?? ??? ? .btns a:first-child {
  52. ?? ??? ? ?? ?left: 10px;
  53. ?? ??? ? }
  54. ?? ??? ? .btns a:last-child {
  55. ?? ??? ? ?? ?right: 10px;
  56. ?? ??? ? }
  57. ?? ??? ? .circles {
  58. ?? ??? ? ?? ?position: absolute;
  59. ?? ??? ? ?? ?width: 140px;
  60. ?? ??? ? ?? ?height: 20px;
  61. ?? ??? ? ?? ?left: 50%;
  62. ?? ??? ? ?? ?margin-left: -70px;
  63. ?? ??? ? ?? ?bottom: 30px;
  64. ?? ??? ? }
  65. ?? ??? ? .circles ol {
  66. ?? ??? ? ?? ?width: 150px;
  67. ?? ??? ? }
  68. ?? ??? ? .circles ol li {
  69. ?? ??? ? ?? ?float: left;
  70. ?? ??? ? ?? ?width: 20px;
  71. ?? ??? ? ?? ?height: 20px;
  72. ?? ??? ? ?? ?margin-right: 10px;
  73. ?? ??? ? ?? ?background-color: orange;
  74. ?? ??? ? ?? ?border-radius: 50%;
  75. ?? ??? ? }
  76. ?? ??? ? .circles ol li.cur {
  77. ?? ??? ? ?? ?background-color: yellow;
  78. ?? ??? ? }
  79. ?? ?</style>
  80. </head>
  81. <body>
  82. ?? ?<div class="carousel" id="carousel">
  83. ?? ??? ?<ul class="unit" id="unit">
  84. ?? ??? ??? ?<li><img src="images/0.jpg" alt=""></li>
  85. ?? ??? ??? ?<li><img src="images/1.jpg" alt=""></li>
  86. ?? ??? ??? ?<li><img src="images/2.jpg" alt=""></li>
  87. ?? ??? ??? ?<li><img src="images/3.jpg" alt=""></li>
  88. ?? ??? ??? ?<li><img src="images/4.jpg" alt=""></li>
  89. ?? ??? ?</ul>
  90. ?? ??? ?<div class="btns">
  91. ?? ??? ??? ?<a href="javascript:void(0)" id="leftBtn">&lt;</a>
  92. ?? ??? ??? ?<a href="javascript:void(0)" id="rightBtn">&gt;</a>
  93. ?? ??? ?</div>
  94. ?? ??? ?<div class="circles" id="circles">
  95. ?? ??? ??? ?<ol>
  96. ?? ??? ??? ??? ?<li class="cur"></li>
  97. ?? ??? ??? ??? ?<li></li>
  98. ?? ??? ??? ??? ?<li></li>
  99. ?? ??? ??? ??? ?<li></li>
  100. ?? ??? ??? ??? ?<li></li>
  101. ?? ??? ??? ?</ol>
  102. ?? ??? ?</div>
  103. ?? ?</div>
  104. ?? ?<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
  105. ?? ?<script type="text/javascript">
  106. ?? ?// 获取元素
  107. ?? ?var $unit = $("#unit");
  108. ?? ?var $leftBtn = $("#leftBtn");
  109. ?? ?var $rightBtn = $("#rightBtn");
  110. ?? ?var $circles = $("#circles ol li");
  111. ?? ?var length = $circles.length;
  112. ?? ?// console.log(length);
  113.  
  114. ?? ?// 定义信号量 有效范围: 0, 1, 2, 3, 4
  115. ?? ?var idx = 0;
  116.  
  117. ?? ?// 克隆第一张图片追加到最后一张
  118. ?? ?$unit.children("li:first").clone().appendTo($unit);
  119.  
  120. ?? ?// 右按钮的点击事件
  121. ?? ?$rightBtn.click(function() {
  122. ?? ??? ?// 防流氓
  123. ?? ??? ?if ($unit.is(":animated")) {
  124. ?? ??? ??? ?return;
  125. ?? ??? ?}
  126. ?? ??? ?// 拉动策略: 先拉动, 再瞬移
  127. ?? ??? ?idx++;
  128. ?? ??? ?console.log(idx);
  129. ?? ??? ?// 信号量 有效值是: 0, 1, 2, 3, 4, 5(5是猫腻图)
  130. ?? ??? ?$unit.animate({"left": -560 * idx}, 1000, function() {
  131. ?? ??? ??? ?// 当猫腻图完全显示之后验证信号量
  132. ?? ??? ??? ?if (idx > length - 1) {
  133. ?? ??? ??? ??? ?// idx 归零
  134. ?? ??? ??? ??? ?idx = 0;
  135. ?? ??? ??? ??? ?// 瞬间移动到真图
  136. ?? ??? ??? ??? ?$unit.css("left", 0);
  137. ?? ??? ??? ?}
  138.  
  139. ?? ??? ?})
  140. ?? ??? ?// 小圆点在1000ms之内,对应的是idx = 5 是猫腻图
  141. ?? ??? ?// 0 - 4 是有效值, 5对应的是猫腻图
  142. ?? ??? ?// 定义一个变量用于中转信号量
  143. ?? ??? ?var i = idx <= 4 ? idx : 0;
  144. ?? ??? ?$circles.eq(i).addClass("cur").siblings().removeClass("cur");
  145.  
  146. ?? ?})
  147.  
  148.  
  149. ?? ?// 左按钮点击事件
  150. ?? ?$leftBtn.click(function() {
  151. ?? ??? ?// 防流氓
  152. ?? ??? ?if ($unit.is(":animated")) {
  153. ?? ??? ??? ?return;
  154. ?? ??? ?}
  155.  
  156. ?? ??? ?// 左按钮的拉动策略: 先瞬移, 再拉动
  157. ?? ??? ?idx--;
  158. ?? ??? ?// 边界判断
  159. ?? ??? ?if (idx < 0) {
  160. ?? ??? ??? ?idx = length - 1;
  161. ?? ??? ??? ?// 瞬间移动到猫腻图
  162. ?? ??? ??? ?$unit.css("left", -560 * length);
  163. ?? ??? ?}
  164. ?? ??? ?console.log(idx);
  165. ?? ??? ?// 拉动
  166. ?? ??? ?$unit.animate({"left": -560 * idx}, 1000);
  167.  
  168. ?? ??? ?// 当前小圆点加cur
  169. ?? ??? ?$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
  170. ?? ?})
  171.  
  172. ?? ?// 小圆点事件
  173. ?? ?$circles.mouseenter(function() {
  174. ?? ??? ?// 改变信号量
  175. ?? ??? ?idx = $(this).index();
  176. ?? ??? ?console.log(idx);
  177. ?? ??? ?// 拉动
  178. ?? ??? ?$unit.stop(true).animate({"left": -560 * idx}, 600);
  179. ?? ??? ?// 小圆点加cur
  180. ?? ??? ?$(this).addClass("cur").siblings().removeClass("cur");
  181. ?? ?})
  182.  
  183.  
  184. ?? ?</script>
  185. </body>
  186. </html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号