[TOC]

轮播代码实现

1. 页面高度固定，宽度全屏

轮播高度固定钉，宽度自适应

html

<div class="banner-container">
    <div class="banner-wrap">
        <div class="banner-img1">12</div>
        <div class="banner-img2">aaaa</div>
        <div class="banner-img3">ss</div>
        <div class="banner-img1">dd</div>
    </div>
    <div class='banner-btn'>
        <span data-index='0'></span>
        <span data-index='1'></span>
        <span data-index='2'></span>
    </div>
</div>

less

.banner-container {
  overflow: hidden;
  height: 560px;
  .banner-wrap {
    height: 560px;
    position:relative;
    left: 0;
    >div {
      float: left; width: 25%; height: 560px;
    }
    .banner-img1 {  background-color: red; }
    .banner-img2 { background-color: blue; }
    .banner-img3 { background-color: green; }
  }
    // 轮播中的点
  .banner-btn{
    position:relative;
    top:-54px;
    text-align:center;
    span{
      display:inline-block;
      position:relative;
      z-index:100;
      width:10px;
      height:10px;
      margin:0 10px;
      border: 1px solid white;
      border-radius:100%;
      cursor: pointer;
    }
    .active {
      width:20px;
      background-color: #FFF;
      border-radius: 8px;
    }
  }
}

var bannerWrap = document.getElementsByClassName('banner-wrap')[0];
var button = document.querySelectorAll('.banner-btn span');
var browerWidth = getClientWidth(); // 获取浏览器窗口宽度
var wrapWidth = browerWidth*3;     // 轮播容器宽度   3个图片
bannerWrap.style.width = browerWidth*4 + 'px';// banner容器宽度
bannerWrap.style.left = '0px';  // 第一次赋值
var moveTime = 5000;            // 设置多久移动一次

function tog(index) {
    if (index > 2) {
        tog(0);
        return;
    }
    for (var i = 0; i < button.length; i++) {
        button[i].className = '';
    }
    button[index].className = 'active';
}

// 设置宽度
function setWidth() {
  var width = browerWidth;
  browerWidth = getClientWidth();
  wrapWidth = browerWidth*3;
  bannerWrap.style.width = browerWidth*4 + 'px';// banner容器宽度
  if (width !== 0) {
    // 调整轮播偏移量
    var count = parseInt(bannerWrap.style.left)/ width;
    bannerWrap.style.left = count * browerWidth + 'px';
  }
}
// 浏览器窗口变化
function addHeaderOnResize() {
  // 浏览器大小发生变化:事件绑定， 重置轮播的大小
  window.onresize = function () {
    setWidth();
  };
}
function move() {
  if (parseInt(bannerWrap.style.left) > -wrapWidth) {
    bannerWrap.style.left = parseInt(bannerWrap.style.left) - browerWidth + 'px';
    bannerWrap.style.transition = 'left 1s';
    tog(-parseInt(bannerWrap.style.left)/browerWidth);
    if (parseInt(bannerWrap.style.left) <= -wrapWidth) {
      setTimeout(function () {
        tog(0);
        bannerWrap.style.left = '0px';
        bannerWrap.style.transition = 'left 0s';
      }, 1000);
    }
  } else {
    bannerWrap.style.left = '0px';
    bannerWrap.style.transition = 'left 0s';
  }
}

function getClientWidth(){
  var clientWidth = 0, bodyClientWidth = 0, documentClientWidth = 0;
  if(document.body){ bodyClientWidth = document.body.clientWidth; }
  if(document.documentElement){
    documentClientWidth = document.documentElement.clientWidth;
  }
  clientWidth = (bodyClientWidth - documentClientWidth > 0) ? bodyClientWidth : documentClientWidth;
  return clientWidth;
}

////////////////
// 代码执行
window.timer = setInterval(move, moveTime);
addHeaderOnResize();
// 轮播按钮添加点击事件
for (var i = 0; i < button.length; i++) {
  button[i].onclick = function () {
    bannerWrap.style.left = -browerWidth * this.getAttribute('data-index') + 'px';
    tog(this.getAttribute('data-index'));
    clearInterval(window.timer);
    window.timer = setInterval(move, moveTime);
  };
}

///////////////////////////

http://js.jirengu.com/wezin/1/edit?html,css,js,output

参考资料

js实现轮播效果几种方式简书

# 轮播代码实现

# 1. 页面高度固定，宽度全屏

# 参考资料

轮播代码实现

1. 页面高度固定，宽度全屏

参考资料