左右轮播图片技巧揭秘！学会Javascript秒变高手

想学做网络上那个超棒的左轮播和右轮播图片效果吗？会不会觉得太难了？别怕，小编马上教你如何操作喔！

大家注意了这个轮播图的用处可大了去了。首先，它可以定时自动播放，而且你只要点一下就可以换焦点。更赞的是，左右划一下屏幕，还能看不一样的东西！

搞这个很容易，只要你会用Javascript写个啥程序就成了。首先得先搞定图片展示顺序哈。

 

 

 
1
 
2
 
3
 
 

 

 <
 >

下一步就是：把第一张图搬到盒子尾巴那里，再把最后一张图移到盒子开头儿。前后移动时，这样反反复复的就不怕卡住了！

* {
 margin: 0;
 padding: 0;
 }
 
 ul,
 ol,
 li {
 list-style: none;
 }
 
 a {
 text-decoration: none;
 }
 
 section {
 width: 300px;
 margin: 30px auto;
 height: 200px;
 border: 5px solid;
 position: relative;
 /* overflow: hidden; */
 }
 
 ul {
 width: 300%;
 height: 100%;
 text-align: center;
 line-height: 200px;
 font-size: 100px;
 position: absolute;
 top: 0;
 left: 0;
 }
 
 li {
 width: 300px;
 height: 100%;
 float: left;
 }
 
 ol {
 width: 150px;
 height: 20px;
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 border-radius: 15px;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 }
 
 ol li {
 width: 15px;
 height: 15px;
 background-color: ivory;
 border-radius: 50%;
 }
 
 .active {
 background-color: greenyellow;
 }

记得把相框摆正，让图画更生动。装上秒表就可以自动换图了哈~

//1、获取盛放图片的盒子和盛放焦点的盒子
 let ul = document.querySelector('ul')
 let ol = document.querySelector('ol')
  //获取大盒子和大盒子的宽
 let wrap = document.querySelector('section')
 let wrap_width = wrap.clientWidth

我这儿还遇到个小问题，你看那个鼠标跑到轮播区，图片就停下来不动了；等它出来之后，图还要从头开始放。这咋整？

const frg = document.createDocumentFragment()
 for (let i = 0; i < ul.children.length; i++) {
  let focus = document.createElement('li')
  frg.appendChild(focus)
  //焦点初始化
  if (i == 0) focus.className = 'active'
 }
 ol.appendChild(frg)

别担心，解决起来简单得很！你只要让音乐在鼠标进来时停下来，出去后再接着放就行了。再说，如果还能加上左击右击和聚焦点击的特效功能的话，相信会更好玩儿！

最后别让定时器给整没了，还得想法子处理快速点击引发的问题。比方说，可以加个开关做按钮，要换图呢就先把它关掉，搞定之后再打开。

let first = ul.firstElementChild.cloneNode(true)
let last = ul.lastElementChild.cloneNode(true)
ul.appendChild(first)
ul.insertBefore(last, ul.firstElementChild)
ul.style.width = ul.children.length * 100 + '%'
ul.style.left = -wrap_width + 'px'

这样说，今天我要给大家说说如何使用那个轮播图片功能~希望能帮到大伙儿（肯定行）。别客气，有什么不明白的尽管提出来！别忘了点赞分享给小伙伴

//设置一个图片索引
 let index = 1
  //一会儿会用到这段代码，就直接封装成函数了
  autoplay()

//自动播放函数，每隔两秒切换一次图片
 function autoplay() {
  move_time = setInterval(() => {
  index++
  move(ul, 'left', -index * wrap_width, movend)
  }, 2000)
 }
 //运动函数，设置图片切换方式
 //参数ele，元素；type，元素属性；value，元素运动结束时属性值；cb()，元素运动结束函数
 function move(ele, type, value, cb) {
  //获取元素属性初始值
  let spe = parseInt(getComputedStyle(ele)[type])
  //元素属性改变过程
  change_timer = setInterval(() => {
  value > spe ? spe += 5 : spe -= 5
  ele.style[type] = spe + 'px'
  if (value > spe) {
   if (spe >= value) {
   clearInterval(change_timer)
   cb()
   }
  } else {
   if (spe = ul.children.length - 1) {
  index = 1
  ul.style.left = -index * wrap_width + 'px'
  }
  if (index <= 0) {
  index = ol.children.length - 1
  ul.style.left = -index * wrap_width + 'px'
  }
  for (let i = 0; i < ol.children.length; i++) {
  ol.children[i].className = ''
  }
  ol.children[index - 1].className = 'active'
 }