纯js响应式轮播图

 查看演示  website  立即下载

纯js写的轮播图

// 屏幕的宽度
var width = document.body.offsetWidth;
//统一高度，宽高比例可根据ui修改，目前宽高比例为2.75
document.querySelector(".banner_images li img").style.height = width / 2.75 + "px"
for (var j = 1; j <= document.querySelectorAll(".banner_images li").length - 1; j++) {
    document.querySelector(".banner_index-frame").appendChild(document.createElement("li"));
    document.querySelectorAll(".banner_images li img")[j].style.height = width / 2.75 + "px"
}

// 抽取的代码 提升代码的可读性,以及 降低维护的难度
//开启过渡效果
var startTransition = function() {
    moveUl.style.transition = 'all .5s';
}

//关闭过渡效果
var endTransition = function() {
    moveUl.style.transition = '';
}

// 开启定时器
var timeId = setInterval(function() {
    // 累加
    index++;
    if (index >= document.querySelectorAll(".banner_images li").length) {
        index = 0
    }
    // 将 过渡开启 
    // moveUl.style.transition = 'all .3s';
    startTransition();

    // 修改 ul的位置
    // moveUl.style.transform = 'translateX('+index*width*-1+'px)';
    setTransform(index * width * -1);

}, 3000);

PREVIOUS:
NEXT:
jQuery动态绘图插件ImageDrawer.js
百度地图api使用（封装成函数）