js实现首页轮番图


highlight: a11y-dark

theme: smartblue

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情

展示

动画.gif

轮番图

轮播图是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。

源码展示

设置body

  1. <body>
  2. <div class="m-view">
  3. <div class="slide" style="left: -800px">
  4. <img src="1.jpg" alt="4">
  5. <img src="2.jpg" alt="0">
  6. <img src="3.jpg" alt="1">
  7. <img src="4.jpg" alt="2">
  8. <img src="5.jpg" alt="3">
  9. <img src="3.jpg" alt="4">
  10. <img src="2.jpg" alt="0">
  11. </div>
  12. <div class="prev"><</div>
  13. <div class="next">></div>
  14. <div class="pointer">
  15. <span class="button on" index="0"></span>
  16. <span class="button" index="1"></span>
  17. <span class="button" index="2"></span>
  18. <span class="button" index="3"></span>
  19. <span class="button" index="4"></span>
  20. </div>
  21. </div>

样式设置

  1. <style>
  2. .m-view,.m-view .slide img{
  3. position: relative;/*作为绝对定位的父元素*/
  4. width: 500px;
  5. height: 300px;
  6. }
  7. .m-view{
  8. overflow: hidden;/*将超出该div的子元素隐藏*/
  9. }
  10. .m-view .slide{
  11. position: absolute;
  12. width: 500px;
  13. height: 300px;
  14. }
  15. .m-view .slide img{
  16. margin-right: -5px;
  17. }
  18. .m-view .prev,.m-view .next{
  19. position: absolute;
  20. top: 40%;
  21. font: 60px/60px Microsoft YaHei;
  22. color: #00BFFF;
  23. }
  24. .m-view .prev{
  25. left: 10px;
  26. }
  27. .m-view .next{
  28. right: 10px;
  29. }
  30. .m-view .pointer{
  31. position: absolute;
  32. bottom: 40px;
  33. left: 33%;
  34. }
  35. .m-view .pointer span{
  36. display: inline-block;/*水平排列*/
  37. width: 40px;
  38. height: 40px;
  39. border-radius: 20px;
  40. margin-right: 10px;
  41. background-color: #00FF00;
  42. }
  43. .m-view .pointer .on{/*点亮当前图片对应的圆圈*/
  44. background-color: #1E90FF;
  45. }
  46. img{
  47. object-fit: contain;
  48. }
  49. </style>

实现轮番

  1. var view=document.getElementsByClassName(m-view)[0];
  2. var slide=document.getElementsByClassName(slide)[0];
  3. var prev=document.getElementsByClassName(prev)[0];
  4. var next=document.getElementsByClassName(next)[0];
  5. var button=document.getElementsByClassName(button);
  6. var curIndex=0;//当前图片的索引位置
  7. var toggled=true;//是否正在切换,true表明切换已完成,此时才能切换
  8. /* Toggle函数实现切换一张图片的功能 */
  9. function Toggle () {
  10. var TIMER=50;//滑动一次所用的时间,它是setInterval的第二个参数
  11. var time=800;//每切换一张图片总共用的时长
  12. var times=time/TIMER;//每切换一张图片需滑动的次数
  13. var stepLenth=800/times;//每次滑动的步长
  14. var leftToggle=function () {
  15. var t1=times;
  16. function leftStep(){
  17. slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
  18. t1--;
  19. if (!t1) {
  20. clearInterval(interval);
  21. curIndex--;
  22. if (curIndex<0) {
  23. slide.style.left=parseInt(slide.style.left)-4000+"px";
  24. curIndex=4;
  25. };
  26. toggled=true;
  27. };
  28. };
  29. if (toggled==true) {
  30. toggled=false;
  31. button[curIndex].className="button";
  32. if (curIndex!=0) {
  33. button[curIndex-1].className="button on";
  34. }else{
  35. button[curIndex+4].className="button on";
  36. }
  37. var interval=setInterval(leftStep,TIMER);
  38. };
  39. };
  40. var rightToggle=function () {
  41. var t2=times;
  42. function leftStep(){
  43. slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
  44. t2--;
  45. if (!t2) {
  46. clearInterval(interval);
  47. curIndex++;
  48. if (curIndex>4) {
  49. slide.style.left=parseInt(slide.style.left)+4000+"px";
  50. curIndex=0;
  51. };
  52. toggled=true;
  53. };
  54. };
  55. if (toggled==true) {
  56. toggled=false;
  57. button[curIndex].className="button";
  58. if (curIndex!=4) {
  59. button[curIndex+1].className="button on";
  60. }else{
  61. button[curIndex-4].className="button on";
  62. };
  63. var interval=setInterval(leftStep,TIMER);
  64. };
  65. }
  66. this.leftToggle=leftToggle;//输出对外的接口
  67. this.rightToggle=rightToggle;
  68. };
  69. var toggle=new Toggle();
  70. prev.onclick=function () {
  71. toggle.leftToggle();
  72. };
  73. next.onclick=function () {
  74. toggle.rightToggle();
  75. };
  76. /* 点击圆圈跳转功能 */
  77. for (var i = 0; i < button.length; i++) {
  78. button[i].onclick=function () {
  79. var newIndex=parseInt(this.getAttribute("index"));
  80. if (newIndex!=curIndex) {
  81. var distance=-800*(newIndex-curIndex);
  82. slide.style.left=parseInt(slide.style.left)+distance+"px";
  83. button[curIndex].className="button";
  84. button[newIndex].className="button on";
  85. curIndex=newIndex;
  86. };
  87. };
  88. }
  89. /* 自动播放功能,鼠标移上去停止播放,移开再次播放 */
  90. var intervalo=setInterval(toggle.rightToggle,3000);
  91. view.onmouseover=function () {
  92. clearInterval(intervalo);
  93. }
  94. view.onmouseout=function () {
  95. intervalo=setInterval(toggle.rightToggle,3000);
  96. }

文章标签:

原文连接:https://juejin.cn/post/7106304127692439588

相关推荐

Webpack学习系列 - Webpack5 怎么集成Babel ?

我在淘宝做弹窗,2022 年初的回顾与展望

看完这篇,你也可以搞定有趣的动态曲线绘制

低代码平台的属性面板该如何设计?

34个图片压缩工具集合,包含在线压缩和CLI工具

冴羽答读者问:过程比结果重要吗?如果是,怎么理解?如果不是,又怎么解?

中杯超大杯中间的新选择——vue2.7+vite+ts实践

LiveData源码分析

亚马逊Prime:流媒大战杀手锏

Vue详解知识概括

基于 Docker 来部署 Vue 或 React 前端项目及 Node 后端服务

完美解决自定义字体垂直方向上下偏移的问题

使用vuepress从零开始搭建我的技术文档|已部署到线上

【Vue.js 3.0源码】AST 转换之节点内部转换

小程序+电商,该如何寻找营销增长点

前端如何开始深度学习,那不妨试试JAX

你可能不知道的 前端浏览器(window) 对本地文件操作(File System Access API)

爱奇艺向抖音开启授权,打开内容价值的新大门

使用ComposeDesktop开发一款桌面端多功能APK工具

一个简洁、强大、可扩展的前端项目架构是什么样的?