主轮播图预览预览_一个简易的 Web 不会轮播的轮播图

访问：http://songothao.gitee.io/web_simple_paper_rotation/

请问你觉得哪个妹纸最好看，评论区见

下载：叁贰壹/WEB 简易妹纸轮播图

预览：

运用 HTML + CSS + JS：

JS代码如下：

var btn = document.getElementById('btn');
var carousel = document.getElementById('carousel');

for(var i=0; i<btn.children.length; i++) {
    btn.children[i].index = i;  //保存索引
    btn.children[i].onmouseover = function(){
        for(var j=0; j<btn.children.length; j++){
            btn.children[j].className = '';
        }
        this.className = 'current';
        var target = - this.index * 270;
        animate(carousel, target);
    }
}

// 动画效果
function animate(obj,target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var leader = obj.offsetLeft;
        var step = 10;
        step = leader < target ? step : -step;
        if(Math.abs(leader - target) >= Math.abs(step)){
            leader += step;
            obj.style.left = leader + 'px';
        } else {
            obj.style.left = target + 'px';
            clearInterval(obj.timer);
        }
    },15)
}

animate 函数封装的是图片的滑动效果

CSDN：https://blog.csdn.net/weixin_43148062

简书：https://www.jianshu.com/u/45339cbb7573