原生javascript实现轮播图

乌龙茶3297

 关注

阅读 55

2022-07-12

轮播图其实就是靠修改元素的translate3d、margin-left、left等css属性值去实现的

如果需要头尾衔接（就是从最后一张播放到第一张时不会出现直接返回第一张的现象），那么需要复制第一张图片添加到最后去，复制添加的那一张图片完全展示出来后，在悄无声息在瞬间将相关的css属性值归零

在这里我写了6种例子

其实第一种只是css属性中比第二种多了个transition属性

第一种比较容易实现：就是单击某个元素是播放到相应图片，有动画的那种（看的来它不是头尾衔接的那种）

css



* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #ccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  width: 500%;
  height: 12.5rem;
  transition: 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Picture {
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  width: calc(100% / 5);
  background-color: green;
}

.shield {
  width: 31.25rem;
  height: 12.5rem;
  position: absolute;
  top: 7px;
}

.ShieldTop {
  width: 100%;
  height: calc(100% - 32px);
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.ShieldButtom {
  width: 100%;
  height: 32px;
  padding: 0px 10px 10px;
  box-sizing: border-box;
}

.ShieldButtom>ul {
  min-height: 20px;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ShieldButtom>ul>li {
  width: 20px;
  height: 20px;
  line-height: 1.25rem;
  cursor: pointer;
  text-align: center;
  border: 1px solid #CCCCCC;
}

.ShieldButtom>ul>li+li {
  margin-left: 10px;
}

.current {
  color: #000000;
  background-color: #f3f3f3;
}

.ShieldButtom>ul>li:hover,
.currentPro {
  color: #f3f3f3;
  background-color: #800000;
}

.ShieldTop>label {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #f3f3f3;
  opacity: 0.3;
  border: 1px solid #FFFFFF;
  background-color: #000000;
}

.ShieldTop>label:nth-child(2) {
  right: 10px;
}



html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture">第一张</div>
          <div class="Picture">第二张</div>
          <div class="Picture">第三张</div>
          <div class="Picture">第四张</div>
          <div class="Picture">第五张</div>
        </div>
      </div>
      <div class="shield">
        <div class="ShieldTop">
          <label class="left"><</label>
          <label class="right">></label>
        </div>
        <div class="ShieldButtom">
          <ul></ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>



javascript



(function() {
  let PictureList = document.querySelector('.PictureList'),
    ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
    left = document.querySelector('.left'),
    right = document.querySelector('.right'),
    shield = document.querySelector('.shield');
  let LeftNum = 0;

  function BgColor(LeftNum) {
    for (let itme of ShieldButtomUl.children) {
      if (parseInt(itme.innerText) !== LeftNum) {
        itme.classList.remove('currentPro');
        itme.classList.add('current');
      } else {
        itme.classList.remove('current');
        itme.classList.add('currentPro');
      }
    }
  }

  function roll() {
    if (LeftNum === 4) {
      LeftNum = 0;
      PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      BgColor(1);
    } else {
      LeftNum += 1;
      PictureList.style.transform = `translate3d(-${LeftNum*500}px, 0px, 0px)`;
      BgColor(LeftNum + 1);
    }
  }

  let setTime = setInterval(roll, 5000);

  for (let i = 0; i < PictureList.children.length; i++) {
    let li = document.createElement('li');
    li.innerText = i + 1;
    if (i === 0) {
      li.classList.add('currentPro');
    } else {
      li.classList.add('current');
    }
    li.addEventListener('click', function() {
      LeftNum = parseInt(li.innerText)
      LeftNum -= 2;
      roll();
    });
    ShieldButtomUl.appendChild(li);
  }

  right.addEventListener('click', function() {
    roll();
  });
  left.addEventListener('click', function() {
    LeftNum -= 2;
    if (LeftNum === -2) {
      LeftNum = 3;
    }
    roll();
  });
  shield.addEventListener('mouseover', (e) => {
    clearInterval(setTime);
  });
  shield.addEventListener('mouseout', (e) => {
    setTime = setInterval(roll, 5000);
  });
})();



第二种比较容易实现：就是单击某个元素是播放到相应图片，全程无动画的那种（瞬间展示相应图片，所以看不出来其实它不是头尾衔接的那种）

css



* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #ccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  width: 500%;
  height: 12.5rem;
  /* transition: 1s ease; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.Picture {
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  width: calc(100% / 5);
  background-color: green;
}

.shield {
  width: 31.25rem;
  height: 12.5rem;
  position: absolute;
  top: 7px;
}

.ShieldTop {
  width: 100%;
  height: calc(100% - 32px);
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.ShieldButtom {
  width: 100%;
  height: 32px;
  padding: 0px 10px 10px;
  box-sizing: border-box;
}

.ShieldButtom>ul {
  min-height: 20px;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ShieldButtom>ul>li {
  width: 20px;
  height: 20px;
  line-height: 1.25rem;
  cursor: pointer;
  text-align: center;
  border: 1px solid #CCCCCC;
}

.ShieldButtom>ul>li+li {
  margin-left: 10px;
}

.current {
  color: #000000;
  background-color: #f3f3f3;
}

.ShieldButtom>ul>li:hover,
.currentPro {
  color: #f3f3f3;
  background-color: #800000;
}

.ShieldTop>label {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #f3f3f3;
  opacity: 0.3;
  border: 1px solid #FFFFFF;
  background-color: #000000;
}

.ShieldTop>label:nth-child(2) {
  right: 10px;
}



html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture">第一张</div>
          <div class="Picture">第二张</div>
          <div class="Picture">第三张</div>
          <div class="Picture">第四张</div>
          <div class="Picture">第五张</div>
        </div>
      </div>
      <div class="shield">
        <div class="ShieldTop">
          <label class="left"><</label>
          <label class="right">></label>
        </div>
        <div class="ShieldButtom">
          <ul></ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
        
        </script>
  </body>
</html>



javascript



(function() {
  let PictureList = document.querySelector('.PictureList'),
    ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
    left = document.querySelector('.left'),
    right = document.querySelector('.right'),
    shield = document.querySelector('.shield');
  let LeftNum = 0;

  function BgColor(LeftNum) {
    for (let itme of ShieldButtomUl.children) {
      if (parseInt(itme.innerText) !== LeftNum) {
        itme.classList.remove('currentPro');
        itme.classList.add('current');
      } else {
        itme.classList.remove('current');
        itme.classList.add('currentPro');
      }
    }
  }

  function roll() {
    if (LeftNum === 4) {
      LeftNum = 0;
      PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      BgColor(1);
    } else {
      LeftNum += 1;
      PictureList.style.transform = `translate3d(-${LeftNum*500}px, 0px, 0px)`;
      BgColor(LeftNum + 1);
    }
  }

  let setTime = setInterval(roll, 5000);

  for (let i = 0; i < PictureList.children.length; i++) {
    let li = document.createElement('li');
    li.innerText = i + 1;
    if (i === 0) {
      li.classList.add('currentPro');
    } else {
      li.classList.add('current');
    }
    li.addEventListener('click', function() {
      LeftNum = parseInt(li.innerText)
      LeftNum -= 2;
      roll();
    });
    ShieldButtomUl.appendChild(li);
  }

  right.addEventListener('click', function() {
    roll();
  });
  left.addEventListener('click', function() {
    LeftNum -= 2;
    if (LeftNum === -2) {
      LeftNum = 3;
    }
    roll();
  });
  shield.addEventListener('mouseover', (e) => {
    clearInterval(setTime);
  });
  shield.addEventListener('mouseout', (e) => {
    setTime = setInterval(roll, 5000);
  });
})();



第三种细节有点麻烦：就是单击某个元素是播放到相应图片，有动画（不是css动画）而且是头尾衔接的那种

css



* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #ccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Picture {
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  width: calc(100% / 5);
  background-color: green;
}

.shield {
  width: 31.25rem;
  height: 12.5rem;
  position: absolute;
  top: 7px;
}

.ShieldTop {
  width: 100%;
  height: calc(100% - 32px);
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.ShieldButtom {
  width: 100%;
  height: 32px;
  padding: 0px 10px 10px;
  box-sizing: border-box;
}

.ShieldButtom>ul {
  min-height: 20px;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ShieldButtom>ul>li {
  width: 20px;
  height: 20px;
  line-height: 1.25rem;
  cursor: pointer;
  text-align: center;
  border: 1px solid #CCCCCC;
}

.ShieldButtom>ul>li+li {
  margin-left: 10px;
}

.current {
  color: #000000;
  background-color: #f3f3f3;
}

.ShieldButtom>ul>li:hover,
.currentPro {
  color: #f3f3f3;
  background-color: #800000;
}

.ShieldTop>label {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #f3f3f3;
  opacity: 0.3;
  border: 1px solid #FFFFFF;
  background-color: #000000;
}

.ShieldTop>label:nth-child(2) {
  right: 10px;
}



html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture">第一张</div>
          <div class="Picture">第二张</div>
          <div class="Picture">第三张</div>
          <div class="Picture">第四张</div>
          <div class="Picture">第五张</div>
        </div>
      </div>
      <div class="shield">
        <div class="ShieldTop">
          <label class="left"><</label>
          <label class="right">></label>
        </div>
        <div class="ShieldButtom">
          <ul></ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>



javascript



(function() {
  let PictureList = document.querySelector('.PictureList'),
    ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
    left = document.querySelector('.left'),
    right = document.querySelector('.right'),
    shield = document.querySelector('.shield');
  let LeftNum = 0,
    sign = null;

  function BgColor(LeftNum) {
    for (let itme of ShieldButtomUl.children) {
      if (parseInt(itme.innerText) !== LeftNum) {
        itme.classList.remove('currentPro');
        itme.classList.add('current');
      } else {
        itme.classList.remove('current');
        itme.classList.add('currentPro');
      }
    }
  }
  for (let i = 0; i < PictureList.children.length; i++) {
    let li = document.createElement('li');
    li.innerText = i + 1;
    if (i === 0) {
      li.classList.add('currentPro');
    } else {
      li.classList.add('current');
    }
    li.addEventListener('click', function() {
      if ((parseInt(li.innerText) - 1) !== Math.abs(LeftNum / 500)) {
        let Num = 0;
        if ((parseInt(li.innerText) - 1) > Math.abs(LeftNum / 500) || Math.abs(LeftNum / 500) ===
          5) {
          if (Math.abs(LeftNum / 500) === 5 || Math.abs(LeftNum / 500) === 0) {
            Num = parseInt(li.innerText) - 1;
          } else {
            Num = (parseInt(li.innerText) - 1) - Math.abs(LeftNum / 500);
          }
          if (Math.abs(LeftNum / 500) % 1 !== 0) {
            Num--;
          }
          for (let i = 0; i < Num; i++) {
            NextRoll();
          }
        } else {
          Num = Math.abs(LeftNum / 500) - (parseInt(li.innerText) - 1);
          if (Math.abs(LeftNum / 500) % 1 !== 0) {
            Num--;
          }
          for (let i = 0; i < Num; i++) {
            PreviousRoll();
          }
        }
      }
    });

    ShieldButtomUl.appendChild(li);
  }
  PictureList.appendChild(PictureList.children[0].cloneNode(true));
  PictureList.style.width = PictureList.children.length * 100 + "%";

  function NextRoll() {
    let timer = setInterval(function() {
      if (LeftNum === -2500) {
        LeftNum = 0;
        sign = 0;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      } else {
        LeftNum = LeftNum - 12.5;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      }
      if (LeftNum % 500 === 0) {
        if (Math.abs(LeftNum / 500) > 0 && Math.abs(LeftNum / 500) < 5) {
          BgColor(Math.abs(LeftNum / 500) + 1);
        } else {
          BgColor(1);
        }
        if (sign !== 0) {
          clearInterval(timer);
        }
        sign = null;
      }
    }, 15);
  }

  function PreviousRoll() {
    let timer = setInterval(function() {
      if (LeftNum === 0) {
        LeftNum = -2500;
        sign = 0;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      } else {
        LeftNum = LeftNum + 12.5;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      }
      if (LeftNum % 500 === 0) {
        if (Math.abs(LeftNum / 500) >= 0 && Math.abs(LeftNum / 500) < 5) {
          BgColor(Math.abs(LeftNum / 500) + 1);
        }
        if (sign !== 0) {
          clearInterval(timer);
        }
        sign = null;
      }
    }, 15);
  }

  let setTime = setInterval(NextRoll, 3000);
  right.addEventListener('click', function() {
    NextRoll();
  });
  left.addEventListener('click', function() {
    PreviousRoll();
  });

  shield.addEventListener('mouseover', (e) => {
    clearInterval(setTime);
  });
  shield.addEventListener('mouseout', (e) => {
    setTime = setInterval(NextRoll, 3000);
  });
})();



第四种：用户无法操作，页码加载完成后自动开始，鼠标移入时停止，鼠标移出后再次开始，有动画（不是css动画）而且是头尾衔接的那种

css



* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #ccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Picture {
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  width: calc(100% / 5);
  background-color: green;
}



html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture">第一张</div>
          <div class="Picture">第二张</div>
          <div class="Picture">第三张</div>
          <div class="Picture">第四张</div>
          <div class="Picture">第五张</div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>



javascript



(function() {
  let PictureList = document.querySelector('.PictureList');
  let LeftNum = 0,
    setTime = null,
    timer;
  PictureList.appendChild(PictureList.children[0].cloneNode(true));
  PictureList.style.width = PictureList.children.length * 100 + "%";

  function roll() {

    timer = setInterval(function() {
      if (LeftNum === -2500) {
        LeftNum = 0;
        sign = 0;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      } else {
        LeftNum = LeftNum - 0.5;
        PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
      }
    }, 15);

  }
  setTime = setTimeout(roll, 500);
  PictureList.addEventListener('mouseover', (e) => {
    clearTimeout(setTime);
    clearInterval(timer);
  });
  PictureList.addEventListener('mouseout', (e) => {
    setTime = setTimeout(roll, 0);
  });
})();



第五种：淡入淡出，有动画（不是css动画）的那种

css



* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #ccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  background-color: green;
}

.Picture {
  position: absolute;
  width: 31.25rem;
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  background-color: green;
  transition: 1.5s ease;
  opacity: 0;
  z-index: 0;
}

.PicturePro {
  z-index: 1;
  opacity: 1;
}

.shield {
  width: 31.25rem;
  height: 12.5rem;
  position: absolute;
  z-index: 1;
  top: 7px;
}

.ShieldTop {
  width: 100%;
  height: calc(100% - 32px);
  padding: 10px 10px 0px;
  box-sizing: border-box;
}

.ShieldButtom {
  width: 100%;
  height: 32px;
  padding: 0px 10px 10px;
  box-sizing: border-box;
}

.ShieldButtom>ul {
  min-height: 20px;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ShieldButtom>ul>li {
  width: 20px;
  height: 20px;
  line-height: 1.25rem;
  cursor: pointer;
  text-align: center;
  border: 1px solid #CCCCCC;
}

.ShieldButtom>ul>li+li {
  margin-left: 10px;
}

.current {
  color: #000000;
  background-color: #f3f3f3;
}

.ShieldButtom>ul>li:hover,
.currentPro {
  color: #f3f3f3;
  background-color: #800000;
}

.ShieldTop>label {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 35%;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  font-weight: bold;
  font-family: '黑体';
  font-size: 30px;
  color: #f3f3f3;
  opacity: 0.3;
  border: 1px solid #FFFFFF;
  background-color: #000000;
}

.ShieldTop>label:nth-child(2) {
  right: 10px;
}



html



<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture PicturePro">淡入淡出</div>
          <div class="Picture">轮播图</div>
          <div class="Picture">图片效果才会明显</div>
          <div class="Picture">这不是图片</div>
          <div class="Picture">索引效果不明显</div>
        </div>
      </div>
      <div class="shield">
        <div class="ShieldTop">
          <label class="left"><</label>
          <label class="right">></label>
        </div>
        <div class="ShieldButtom">
          <ul></ul>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>



javascript



(function() {
  let PictureList = document.querySelector('.PictureList'),
    ShieldButtomUl = document.querySelector('.ShieldButtom>ul'),
    left = document.querySelector('.left'),
    right = document.querySelector('.right'),
    shield = document.querySelector('.shield'),
    itmeArray = new Array();
  let LeftNum = 0;

  function BgColor(LeftNum) {
    for (let itme of ShieldButtomUl.children) {
      if (parseInt(itme.innerText) !== LeftNum) {
        itme.classList.remove('currentPro');
        itme.classList.add('current');
      } else {
        itme.classList.remove('current');
        itme.classList.add('currentPro');
      }
    }
  }

  function roll() {
    if (LeftNum === 4) {
      LeftNum = 0;
      BgColor(1);
    } else {
      LeftNum += 1;
      BgColor(LeftNum + 1);
    }

    for (let i in itmeArray) {
      if (parseInt(i) !== LeftNum) {
        itmeArray[parseInt(i)].classList.remove('PicturePro');
      } else {
        itmeArray[parseInt(i)].classList.add('PicturePro');
      }
    }
  }

  let setTime = setInterval(roll, 5000);

  for (let i = 0; i < PictureList.children.length; i++) {
    itmeArray.push(PictureList.children[i]);
    let li = document.createElement('li');
    li.innerText = i + 1;
    if (i === 0) {
      li.classList.add('currentPro');
    } else {
      li.classList.add('current');
    }
    li.addEventListener('click', function() {
      LeftNum = parseInt(li.innerText)
      LeftNum -= 2;
      roll();
    });
    ShieldButtomUl.appendChild(li);
  }

  right.addEventListener('click', function() {
    roll();
  });
  left.addEventListener('click', function() {
    LeftNum -= 2;
    if (LeftNum === -2) {
      LeftNum = 3;
    }
    roll();
  });
  shield.addEventListener('mouseover', (e) => {
    clearInterval(setTime);
  });
  shield.addEventListener('mouseout', (e) => {
    setTime = setInterval(roll, 5000);
  });
})();



第六种：模仿京东商城首页的那个什么图

css

* {
  margin: 0px;
  padding: 0px;
  -moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  /*适用ie*/
  -ms-user-select: none;
  user-select: none;
  /* 稳定字体 */
  -webkit-font-smoothing: antialiased;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.main {
  padding: 7px;
  width: 31.25rem;
  height: 12.5rem;
  position: relative;
  border: 1px solid #cccccc;
}

.PictureRegion {
  width: 31.25rem;
  height: 12.5rem;
  overflow: hidden;
}

.PictureList {
  height: 12.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Picture {
  height: 12.5rem;
  color: #f3f3f3;
  font-size: 3.5rem;
  text-align: center;
  line-height: 12.5rem;
  width: calc(100% / 5);
  background-color: green;
}

.shield {
  width: 31.25rem;
  height: 12.5rem;
  position: absolute;
  top: 7px;
  overflow: hidden;
}

.trajectory {
  width: 100%;
  height: 5px;
  background-color: #cccccc;
  position: absolute;
  bottom: 10px;
  display: flex;
  align-items: center;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.trajectoryPro {
  opacity: 0;
  visibility: hidden;
}

.main:hover .trajectoryPro {
  opacity: 1;
  visibility: visible;
}

.slider {
  width: 50px;
  height: 10px;
  position: absolute;
  border-radius: 3px;
  background-color: #800000;
}

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      
    </style>
  </head>
  <body>
    <div class="main">
      <div class="PictureRegion">
        <div class="PictureList">
          <div class="Picture">第一张</div>
          <div class="Picture">第二张</div>
          <div class="Picture">第三张</div>
          <div class="Picture">第四张</div>
          <div class="Picture">第五张</div>
        </div>
      </div>
      <div class="shield">
        <div class="trajectory trajectoryPro">
          <div class="slider"></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      
    </script>
  </body>
</html>

javascript

(function() {
        let PictureList = document.querySelector('.PictureList'),
          main = document.querySelector('.main'),
          shield = document.querySelector('.shield'),
          slider = document.querySelector('.slider');

        let LeftNum = 0,
          setTime = null,
          timer = null,
          Elayer = 0;
        
        PictureList.appendChild(PictureList.children[0].cloneNode(true));
        PictureList.style.width = PictureList.children.length * 100 + "%";
        
        function roll() {
          timer = setInterval(function() {
            if (LeftNum <= -2500) {
              LeftNum = 0;
              PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
            } else {
              LeftNum = LeftNum - 0.5;
              PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
            }
            slider.style.transform = `translate3d(${(Math.abs(LeftNum) / 2500) * 450}px, 0px, 0px)`;
          }, 15);

        }

        setTime = setTimeout(roll, 500);

        function dragFun(event) {
          event = event || window.event;
          let transNum = event.clientX - main.offsetLeft - Elayer;
          if (transNum < 0) {
            transNum = 0;
          } else if (transNum > (slider.parentElement.clientWidth - slider.offsetWidth)) {
            transNum = slider.parentElement.clientWidth - slider.offsetWidth;
          }
          slider.style.transform = `translate3d(${transNum}px, 0px, 0px)`;
          LeftNum = (transNum / 450) * -2500;
          PictureList.style.transform = `translate3d(${LeftNum}px, 0px, 0px)`;
        }

        slider.addEventListener('mousedown', function(event) {
          slider.parentElement.classList.remove('trajectoryPro');
          document.addEventListener('mousemove', dragFun);
          document.addEventListener('mouseup', function(e) {
            document.removeEventListener("mousemove", dragFun);
            if (e.srcElement.nodeName.toLowerCase() === "body") {
              clearTimeout(setTime);
              setTime = setTimeout(roll, 0);
            } else {
              Elayer = 0;
            }
            slider.parentElement.classList.add('trajectoryPro');
          });
          event = event || window.event;
          let transX = document.defaultView.getComputedStyle(slider, null).transform;
          if(transX.split(',')[4]){
            Elayer = event.clientX - main.offsetLeft - parseInt(transX.split(',')[4]);
          }else{
            Elayer = event.clientX - main.offsetLeft;
          }
        });

        main.addEventListener('mouseover', (e) => {
          clearTimeout(setTime);
          clearInterval(timer);
        });
        
        main.addEventListener('mouseout', (e) => {
          if (Elayer === 0) {
            setTime = setTimeout(roll, 0);
          }
        });
      })();

相关推荐

原生JS实现轮播图

独兜曲 103 0 0

原生js实现无缝轮播图

读思意行 62 0 0

原生JS实现呼吸轮播图

小亦同学321 88 0 0

原生JavaScript实现可自定义缩放轮播图效果

booksmg2014 83 0 0

JavaScript轮播图

洲行 56 0 0

关于JavaScript轮播图的实现

柠檬的那个酸_2333 121 0 0

JavaScript实现轮播图方法二

橙子好吃吗 36 0 0

原生JS实现腾讯视频轮播图

7dcac6528821 98 0 0

前端学习之JavaScript实现轮播图

半夜放水 40 0 0

React版轮播图与普敲原生版轮播图

萨摩斯加士奇 31 0 0

精彩评论（0）

0 0 举报