纯js响应式轮播图

查看演示立即下载

插件描述：web端纯js响应式轮播图，支持移动端滑动切换

纯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);

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：百度地图api使用（封装成函数）
下一个特效： jQuery动态绘图插件ImageDrawer.js