老徐WEB:JS简单实现图片滚动效果轮播图,自动、手动和自适应(二)

我就是我 2023-07-07 12:57 9阅读 0赞

轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯、电商和个人博客等,首页基本都会有轮播图。

老徐在上一篇文章的基础上【最简单详细的轮播图原理和制作过程】,又扩展了功能,使之成为网站中常用的样子,包括右下角提示钮和左右滚动按钮。如果还不清楚轮播图原理,请先看上一篇文章,先理解了原理,再看这篇文章,效果会更好。

这是一个完整的常用的轮播图,可以说拿去直接用就好,最终效果图如下。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3V2eW9hYQ_size_16_color_FFFFFF_t_70

老徐先大致介绍一下增加的功能,包括右下角提示钮,鼠标放到哪个圆钮上就滚动到相应的图片上,同时圆钮的颜色也会变化,向前向后都是可以的,还有左右按钮,这个都能理解了,再有把鼠标放到图片上,图片会停止滚动,挪动鼠标后,图片继续滚动,最后是页面自适应,在手机上也是可以的。

下面介绍下增加的代码。

HTML部分增加了圆钮和左右按钮,代码如下:

  1. <div class="box" id="box">
  2. <ul style="left:0px;">
  3. <li><a href="#"><img src="./images/a.png" /></a></li>
  4. <li><a href="#"><img src="./images/b.png" /></a></li>
  5. <li><a href="#"><img src="./images/c.png" /></a></li>
  6. <li><a href="#"><img src="./images/d.png" /></a></li>
  7. <li><a href="#"><img src="./images/e.png" /></a></li>
  8. </ul>
  9. <ul>
  10. <li class="active">1</li>
  11. <li>2</li>
  12. <li>3</li>
  13. <li>4</li>
  14. <li>5</li>
  15. </ul>
  16. <div class="buttons">
  17. <span><</span>
  18. <span>></span>
  19. </div>
  20. </div>

CSS部分增加了自适应,代码如下:

  1. body, div, ul, li, img {
  2. margin:0;
  3. padding:0;
  4. list-style:none;
  5. }
  6. .box {
  7. position:relative;
  8. width:500px;
  9. height:330px;
  10. margin:50px auto;
  11. overflow:hidden; /*只显示当前图片,隐藏其余图片。没有此属性,图片会列成一排*/
  12. }
  13. .box ul:first-of-type {
  14. position:absolute;
  15. top:0;
  16. left:0;
  17. width:3000px;
  18. }
  19. .box ul:first-of-type li {
  20. float:left;
  21. }
  22. .box ul:last-of-type {
  23. position:absolute;
  24. right:10px;
  25. bottom:10px;
  26. }
  27. .box ul:last-of-type li {
  28. float:left;
  29. width:20px;
  30. height:20px;
  31. line-height:20px;
  32. text-align:center;
  33. vertical-align:middle;
  34. border-radius:50%;
  35. margin-left:10px;
  36. background-color:#999;
  37. cursor:pointer;
  38. }
  39. .box ul:last-of-type li.active {
  40. background-color:#55d5d5;
  41. }
  42. .buttons span {
  43. position:absolute;
  44. width:40px;
  45. height:40px;
  46. line-height:38px;
  47. top:50%;
  48. margin-top:-20px;
  49. text-align:center;
  50. font-weight:bold;
  51. font-size:30px;
  52. border:1px solid #fff;
  53. opacity:0.3;
  54. color:#fff;
  55. cursor:pointer;
  56. background-color:black;
  57. }
  58. .buttons span:first-of-type {
  59. left:0px;
  60. }
  61. .buttons span:last-of-type {
  62. left:100%;
  63. margin-left:-40px;
  64. }
  65. @media screen and (max-width:680px){
  66. .box {
  67. width:300px;
  68. height:198px;
  69. }
  70. .box ul:first-of-type li img {
  71. width:300px;
  72. height:198px;
  73. }
  74. .box ul:first-of-type {
  75. width:1800px;
  76. }
  77. .buttons span {
  78. width:20px;
  79. height:20px;
  80. line-height:18px;
  81. margin-top:-10px;
  82. font-size:20px;
  83. }
  84. .buttons span:last-of-type {
  85. margin-left:-20px;
  86. }
  87. }

JS交互部分的代码增加比较多一些。

把图片快速移动过程的代码在一个函数里。

  1. function roll(distance){ // 图片移动的过程
  2. clearInterval(ulImg.timer);
  3. console.log(pointFlag + ' ' + distance + ' ' + ulImg.offsetLeft);
  4. // 移动方向,负数往右,正数往左。
  5. var move = ulImg.offsetLeft < distance ? movePx : -movePx;
  6. /* 滚动定时器 10毫秒移动一次*/
  7. ulImg.timer = setInterval(function(){
  8. ulImg.style.left = ulImg.offsetLeft + move + "px";
  9. var leave = distance - ulImg.offsetLeft; // 到终点前剩下的距离
  10. if(Math.abs(leave) < Math.abs(move)){
  11. clearInterval(ulImg.timer);
  12. ulImg.style.left = distance + "px"; // 不足一次滚动的距离时,直接到达
  13. }
  14. }, setTime);
  15. }

触及小圆点时的操作,详情请看注释。

  1. for(var i = 0; i < len; i++){
  2. listFlag[i].index = i; // 给每个小圆点添加index属性,并赋值
  3. listFlag[i].onmouseover = function(){ // 为每个小圆点添加onmouseover事件
  4. for(var j = 0; j < len; j++){
  5. listFlag[j].removeAttribute("class"); // 移动class属性
  6. }
  7. this.className = "active"; // 为触发的小圆点添加class属性
  8. var temp = picFlag;
  9. pointFlag = picFlag = this.index; // 记录触发的那个小圆点
  10. console.log(picFlag);
  11. var times = Math.abs(picFlag - temp); // 触发的小圆点距上个小点圆点的间距
  12. movePx = movePx * times; // 把滚动的距离翻倍,这样可以快速滚动,不用太多时间
  13. roll(-picFlag * imgWidth);
  14. movePx = 15 // 恢复原值
  15. }
  16. }

触及轮播图区域时,图片暂停滚动,离开时继续滚动。

  1. box.onmouseover = function(){
  2. clearInterval(timer);
  3. }
  4. box.onmouseout = function(){
  5. timer = setInterval(autoRun, periodTime);
  6. }

给按钮添加onclick事件。

  1. buttons.children[0].onclick = function(){ // 上一个
  2. // 主要处理下picFlag小于0的情况,此时重置数据即可
  3. pointFlag--;
  4. picFlag--;
  5. if(picFlag < 0){ // 此时显示最后克隆的那张图片
  6. ulImg.style.left = -len*imgWidth + "px";
  7. picFlag = pointFlag = len - 1;
  8. }
  9. roll(-picFlag * imgWidth);
  10. for(var i = 0; i < len; i++){
  11. listFlag[i].removeAttribute("class");
  12. }
  13. listFlag[picFlag].className = "active";
  14. }
  15. buttons.children[1].onclick = function(){ // 下一个
  16. autoRun();
  17. }

关注【老徐WEB前端开发教程】 ,回复:轮播图 ,即有完整代码和素材分享。

发表评论

表情:
评论列表 (有 0 条评论,9人围观)

还没有评论,来说两句吧...

相关阅读