网页版

  1. window.onload = function load(){
  2.   // 左右箭头设置，鼠标放上来才会出现， 离开就消失
  3.   let focus = document.querySelector('.focus');
  4.   let arrow1 = document.querySelector('.arrow-l');
  5.   let arrow2 = document.querySelector('.arrow-r');
  6.   focus.addEventListener('mouseenter',function() {
  7.     arrow1.style.display = 'block';
  8.     arrow2.style.display = 'block';
  9.   })
  10.   focus.addEventListener('mouseleave',function() {
  11.     arrow1.style.display = 'none';
  12.     arrow2.style.display = 'none';
  13.   })
  15.   // 自动根据图片数量生成对应的小圆圈 + 点击小圆圈时候变色和移动
  16.   var ul = focus.querySelector('ul');
  17.   var ol = focus.querySelector('.circle');
  18.   for(let i = 0;i<ul.children.length;i++) {
  19.     let li = document.createElement('li');
  20.     // 记录当前小圆圈的索引号
  21.     li.setAttribute('index',i);
  22.     ol.appendChild(li);
  23.     ol.children[0].className = 'current';
  25.     li.addEventListener('click',function() {
  26.       for(let j = 0;j<ol.children.length;j++) {
  27.         ol.children[j].className='';
  28.       }
  29.       this.className = 'current';
  30.       // move my pic
  31.       // 获取当前的索引号
  32.       let index = this.getAttribute('index');
  33.       // 当我们点击了某个小li，就应该把这个索引号给cnt
  34.       cnt = index;
  35.       let focusWidth = focus.offsetWidth;
  36.       animate(ul,-index*focusWidth);
  37.     })
  38.   }
  39.   // 无缝滚动
  40.   let fir = ul.children[0].cloneNode(true);
  41.   // 深克隆
  42.   ul.appendChild(fir);
  44.   // 点击箭头，图片进行滚动
  45.   let cnt = 0 ;
  46.   // 节流阀
  47.   let flag = true;
  48.   let focusWidth = focus.offsetWidth;
  49.   arrow1.addEventListener('click',function(){
  50.     if(flag) {
  51.       cnt--;
  52.       if(cnt < 0) {
  53.         cnt = ol.children.length - 1;
  54.         ul.style.left = -cnt *focusWidth +'px';
  55.       }
  56.       animate(ul,-cnt*focusWidth,function() {
  57.         flag = true;
  58.       });
  59.       circleChange(cnt);
  60.     }
  61.   })
  63.   arrow2.addEventListener('click',function(){
  64.     if(flag) {
  65.       flag = false;
  66.       cnt++; 
  67.       // 当遍历到最后一张图片时自动跳转到最前面
  68.       if(cnt == ul.children.length - 1) {
  69.         ul.style.left = 0;
  70.         cnt = 0;
  71.         ol.children[0].className = 'current';
  72.       }
  73.       animate(ul,-cnt*focusWidth,function() {
  74.         flag = true;
  75.       });
  76.       circleChange(cnt);
  77.     }
  78.   })
  80.   function circleChange(cnt) {
  81.     for(let j = 0;j<ol.children.length;j++) {
  82.       ol.children[j].className = '';
  83.     }
  84.     ol.children[cnt].className = 'current';
  85.   }
  88.   // 自动播放，手动调用点击事件
  89.   let timer = setInterval(function() {
  90.     arrow2.click();
  91.   },2000)
  92. }
  1. function animate(obj, target, callback) {
  2.   clearInterval(obj.timer);
  3.   obj.timer = setInterval(function() {
  4.     let step = (target - obj.offsetLeft) / 10;
  5.     step = step > 0 ? Math.ceil(step) : Math.floor(step);
  6.     if (obj.offsetLeft == target) {
  7.       // 停止动画 本质是停止定时器
  8.       clearInterval(obj.timer);
  9.       callback && callback();
  10.     }
  11.     // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
  12.     obj.style.left = obj.offsetLeft + step + 'px';
  14.   }, 15);
  15. }

移动端版

  1. window.addEventListener('load', function() {
  2.     // alert(1);
  3.     // 1. 获取元素 
  4.     var focus = document.querySelector('.focus');
  5.     var ul = focus.children[0]; // 将包裹图片的ul获取
  6.     // 获得focus 的宽度
  7.     var w = focus.offsetWidth;
  8.     var ol = focus.children[1]; // 将包裹点点的ol获取
  9.     // 2. 利用定时器自动轮播图图片
  10.     var index = 0;
  12.     var timer = setInterval(function() {
  13.         index++;
  14.         var translatex = -index * w;
  15.         // 过度属性
  16.         ul.style.transition = 'all .3s';
  17.         ul.style.transform = 'translateX(' + translatex + 'px)';
  18.     }, 2000);
  20.     // 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend 
  21.     ul.addEventListener('transitionend', function() {
  22.         // 无缝滚动
  23.         if (index >= 3) {
  24.             index = 0;
  25.             // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置
  26.             ul.style.transition = 'none';
  27.             // 利用最新的索引号乘以宽度 去滚动图片
  28.             var translatex = -index * w;
  29.             ul.style.transform = 'translateX(' + translatex + 'px)';
  30.         } else if (index < 0) {
  31.             index = 2;
  32.             // 去掉过渡效果
  33.             ul.style.transition = 'none';
  34.             // 利用最新的索引号乘以宽度 去滚动图片
  35.             var translatex = -index * w;
  36.             ul.style.transform = 'translateX(' + translatex + 'px)';
  37.         }
  38.         // 3. 小圆点跟随变化
  39.         // 把ol里面li带有current类名的选出来去掉类名 remove
  40.         ol.querySelector('.current').classList.remove('current');
  41.         // 让当前索引号 的小li 加上 current   add
  42.         ol.children[index].classList.add('current');
  43.     });
  45.     // 4. 手指滑动轮播图 
  46.     // 触摸元素 touchstart： 获取手指初始坐标
  47.     var startX = 0;
  48.     var moveX = 0; // 后面我们会使用这个移动距离所以要定义一个全局变量
  49.     var flag = false; // 记录手指是否有过移动
  50.     ul.addEventListener('touchstart', function(e) {
  51.         startX = e.targetTouches[0].pageX;
  52.         // 手指触摸的时候就停止定时器
  53.         clearInterval(timer);
  54.     });
  56.     // 移动手指 touchmove： 计算手指的滑动距离， 并且移动盒子
  57.     ul.addEventListener('touchmove', function(e) {
  58.         // 计算移动距离
  59.         moveX = e.targetTouches[0].pageX - startX;
  60.         // 移动盒子：  盒子原来的位置 + 手指移动的距离 
  61.         var translatex = -index * w + moveX;
  62.         // 手指拖动的时候，不需要动画效果所以要取消过渡效果
  63.         ul.style.transition = 'none';
  64.         ul.style.transform = 'translateX(' + translatex + 'px)';
  65.         flag = true; // 如果用户手指移动过我们再去判断否则不做判断效果
  66.         e.preventDefault(); // 阻止滚动屏幕的行为
  67.     });
  69.     // 手指离开 根据移动距离去判断是回弹还是播放上一张下一张
  70.     ul.addEventListener('touchend', function(e) {
  71.         if (flag) {
  72.             // (1) 如果移动距离大于50像素我们就播放上一张或者下一张
  73.             if (Math.abs(moveX) > 50) {
  74.                 // 如果是右滑就是 播放上一张 moveX 是正值
  75.                 if (moveX > 0) {
  76.                     index--;
  77.                 } else {
  78.                     // 如果是左滑就是 播放下一张 moveX 是负值
  79.                     index++;
  80.                 }
  81.                 var translatex = -index * w;
  82.                 ul.style.transition = 'all .3s';
  83.                 ul.style.transform = 'translateX(' + translatex + 'px)';
  84.             } else {
  85.                 // (2) 如果移动距离小于50像素我们就回弹
  86.                 var translatex = -index * w;
  87.                 ul.style.transition = 'all .1s';
  88.                 ul.style.transform = 'translateX(' + translatex + 'px)';
  89.             }
  90.         }
  91.         // 手指离开的时候就重新开启定时器
  92.         clearInterval(timer);
  93.         timer = setInterval(function() {
  94.             index++;
  95.             var translatex = -index * w;
  96.             ul.style.transition = 'all .3s';
  97.             ul.style.transform = 'translateX(' + translatex + 'px)';
  98.         }, 2000);
  99.     });
  101.     // 返回顶部模块制作
  102.     var goBack = document.querySelector('.goBack');
  103.     var nav = document.querySelector('nav');
  105.     window.addEventListener('scroll', function() {
  106.         if (window.pageYOffset >= nav.offsetTop) {
  107.             goBack.style.display = 'block';
  108.         } else {
  109.             goBack.style.display = 'none';
  110.         }
  111.     });
  113.     goBack.addEventListener('click', function() {
  114.         window.scroll(0, 0);
  115.     })
  116. })