PC端的轮播图——JavaScript实现

• 

• 

• 

• 

  样式代码：

  • {

  margin: 0;

  margin: 0;

  }

  a {

  text-decoration: none;

  color: #fff;

  }

  li {

  list-style: none;

  }

  .box {

  width: 800px;

  height: 500px;

  border: 1px solid #ccc;

  margin: 100px auto;

  }

  .banner {

  position: relative;

  width: 800px;

  height: 500px;

  overflow: hidden;

  }

  .banner img {

  width: 800px;

  height: 500px;

  }

  .banner ul {

  position: absolute;

  top: 0;

  left: 0;

  margin: 0;

  padding: 0;

  width: 500%;

  }

  .banner ul li {

  float: left;

  }

  .banner ol {

  margin: 0;

  padding: 0;

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translate(-50%);

  }

  .banner ol li {

  display: inline-block;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background-color: rgb(255, 255, 255);

  z-index: 10;

  margin: 2px;

  }

  .left {

  display: none;

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 20px;

  height: 20px;

  background-color: rgb(0, 0, 0);

  border-radius: 0 10px 10px 0;

  z-index: 100;

  }

  .right {

  display: none;

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%);

  width: 20px;

  height: 20px;

  background-color: rgb(0, 0, 0);

  border-radius: 10px 0 0 10px;

  z-index: 100;

  }

  .banner ol .current {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background-color: red;

  z-index: 10;

  margin: 2px;

  }

  js代码：

  window.addEventListener(‘load’, function() {

  //1、获取元素

  var left = document.querySelector(‘.left’);

  var right = document.querySelector(‘.right’);

  var banner = document.querySelector(‘.banner’);

  var bannerWidth = banner.offsetWidth;

  //2、鼠标经过显示左右按钮

  banner.addEventListener(‘mouseenter’, function() {

  left.style.display = ‘block’;

  right.style.display = ‘block’;

  clearInterval(timer);

  timer = null; //清除定时器变量

  })

  banner.addEventListener(‘mouseleave’, function() {

  left.style.display = ‘none’;

  right.style.display = ‘none’;

  timer = setInterval(function() {

  //手动调用点击事件

  right.click();

  }, 2000)

  })

  //3、动态生成小圆圈

  var ul = banner.querySelector(‘ul’);

  var ol = banner.querySelector(‘ol’);

  for (var i = 0; i < ul.children.length; i++) {

  //创建li

  var li = this.document.createElement(‘li’);

  // 记录当前圆圈的索引号，通过自定义属性来做

  li.setAttribute(‘index’, i);

  //把li插入ol里面

  ol.appendChild(li);

  //圆圈的排他思想

  li.addEventListener(‘click’, function() {

  for (var i = 0; i < ol.children.length; i++) {

  ol.children[i].className = ‘’;

  }

  this.className = ‘current’;

  //点击圆圈，移动图片

  //ul的移动距离等于圆圈索引号乘以图片宽度，注意是负值向左移动

  //当点击某个li就获得当前li索引号

  var index = this.getAttribute(‘index’);

  //当点击了某个li，就把这个li索引号给num

  num = index;

  //当点击了某个li，就把这个li索引号给circle

  circle = index;

  animate(ul, -index * bannerWidth);

  })

  }

  //把ol里面的第一个li设置类命为current

  ol.children[0].className = ‘current’;

  //克隆第一张图片放到最后面

  var first = ul.children[0].cloneNode(true);

  ul.appendChild(first);

  //点击右侧按钮，图片滚动一张

  var num = 0;

  // circle控制圆圈播放

  var circle = 0;

  //节流阀

  var flag = true;

  right.addEventListener(‘click’, function() {

  if (flag) {

  flag = false; //关闭节流阀

  if (num == ul.children.length - 1) {

  ul.style.left = 0;

  num = 0;

  }

  num++;

  animate(ul, -num * bannerWidth, function() {

  flag = true; //打开节流阀

  });

  //点击右侧按钮，圆圈跟随一起变化，可以再声明一个变量控制圆圈播放

  circle++;

  //如果circle等于4说明走到最后图片了

  if (circle == ol.children.length) {

  circle = 0;

  }

  circleChange();

  }