javascript pc端特效——《轮播图》

一、需求

二、效果

 三、代码

结构

<div class="focus"><!--焦点图区域-->
                    <a href="javascript:" class="arrow-r iconfont">&#xe6a2;</a><!--两按钮-->
                    <a href="javascript:" class="arrow-l iconfont">&#xe6db;</a>
                    <ul>
                        <li><a href="javascript:"><img alt="" src="../../图片素材/品优购/图层179.jpg"></a></li>
                        <li><a href="javascript:"><img alt="" src="../../图片素材/品优购/focus1.jpg"></a></li>
                        <li><a href="javascript:"><img alt="" src="../../图片素材/品优购/focus2.jpg"></a></li>
                        <li><a href="javascript:"><img alt="" src="../../图片素材/品优购/focus3.jpg"></a></li>
                    </ul>
                    <ol><!--小圆圈-->
                    </ol>

            </div>

样式

.arrow-l,
.arrow-r{
    display: none;
    z-index: 3;
    font-weight: 700;
    position: absolute;
    height: 40px;
    width: 25px;
    background-color: rgba(0, 0, 0, 0.27);
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: white;
    top: 50%;
    transform: translateY(-50%);
    }
.arrow-l:hover,
.arrow-r:hover{
    background-color: rgba(0, 0, 0, 0.49);
    
    }
.arrow-r{
    right: 0;
    }

.focus ol{
    display: flex;
    justify-content: space-between;
    width: 80px;
    padding-right: 5px;
    padding-left: 5px;
    height: 18px;
    align-items: center;
    position: absolute;
    bottom: 17px;
    left: 50%;
    transform: translateX(-50%);
    }
.focus ol li{
    cursor: pointer;
    height: 12px;
    border-radius: 50%;
    border:2px solid rgba(255, 255, 255, 0.71);
    }
.current{
    background-color: #fff;
    }
.focus {
    width: 721px;
    height: 455px;
    position: relative;
    overflow: hidden;
    }
.focus a:hover{
    color:white;
    }
.focus ul{
 z-index: -1;
    display: flex;
    position: absolute;
    }
.focus ul li{
    width: 721px;
    }

js

//焦点轮播图
let arrowL = document.querySelector('.arrow-l'),
    arrowR = document.querySelector('.arrow-r'),
    ol = document.querySelector('.focus ol'),
    focusImg = document.querySelector('.focus ul'),
    lis = focusImg.querySelectorAll('li'),
    focus = document.querySelector('.focus');
/*animate动画函数*/
function animate(obj,target) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    let step = (target-obj.offsetLeft)/10;
    step = step>0?Math.ceil(step):Math.floor(step);
    obj.style.left = obj.offsetLeft+step+'px';
    if(obj.style.left ===target+'px'){
      clearInterval(obj.timer);
    }
  },15)
}
//小圆圈排他思想函数
function clearClass() {
  for (let i = 0; i < ol.children.length; i++) {/*排他*/
    ol.children[i].className='';/*清除样式*/
  }
}
//小圆圈
let index = 0;/*用作可全局使用的索引号*/
for (let i = 0; i < lis.length; i++) {/*小圆圈个数由图片数量决定*/
  let li = document.createElement('li');
  ol.appendChild(li);
  ol.children[0].className='current';
  li.addEventListener('click',function() {
   clearClass();
    ol.children[i].className='current';/*添加选中时的样式*/
    ol.children[i].setAttribute('index',i);/*给小圆圈设置索引号相当于i，但是可外用*/
    index = ol.children[i].getAttribute('index')/*获取自定义属性的值*/
    flag = index;/*点击了小圆圈，就要把索引号给箭头计数器，计数器就会与索引号同步*/
    animate(focusImg,-index* lis[1].offsetWidth)/*索引号*图宽*/
  })
}


// 右箭头
let flag = 0;/*作为点击箭头的计数器*/
let first =  lis[0].cloneNode(true);/*第一张图复制到最后作为衔接*/
focusImg.appendChild(first);
arrowR.addEventListener('click',function() {
  flag++;
  if(flag===5){/*当图片到达最后一张*/
    focusImg.style.left=0;/*快速复位*/
    flag = 1;/*到第二张图位置*/
  }
  animate(focusImg,-flag*lis[0].offsetWidth);
  index=flag; /*点击了箭头，就要把箭头计数器给小圆圈索引号*/
  clearClass();
  flag===4?index=0:index;/*当走到倒数第二个图，一圈完成*/
  ol.children[index].className='current';
})
// 左箭头
arrowL.addEventListener('click',function() {
  flag--;
  clearInterval(timer);/*移除自动播放*/
  if(flag<0){/*图片在第一张还往前翻*/
    focusImg.style.left = '-2884px'
    flag = 3;
  }
  animate(focusImg,-flag*lis[0].offsetWidth);
  index=flag; /*小圆圈随箭头按下而变化*/
  clearClass();
  flag===4?index=0:index;/*当走到倒数第二个图，一圈完成*/
  ol.children[index].className='current';
})
//自动轮播
let timer = setInterval(function() {
  arrowR.click();/*手动调用点击事件*/
},6000);
focus.addEventListener('mouseleave',function() {/*鼠标离开时开启定时器*/
  timer = setInterval(function() {/*开启定时器*/
  arrowR.click();
},6000);/*变量重新负值*/
  arrowL.style.display='none'
  arrowR.style.display='none'
})
focus.addEventListener('mouseenter',function() {/*鼠标覆盖就停止*/
    arrowL.style.display='block';
    arrowR.style.display='block';
  clearInterval(timer);
  timer =null;/*清除变量*/
  })

四、思路

五、反思

1. 明白了图片无缝衔接的原理，其实就是第一张图复制到最后，再让图片快速移动到指定位置而形成的效果
2. 计数器用处很多！多用，多用，多用
3. 明白了还能使用计时器去调用事件函数