原生JS轮播图

Posted 2021-03-12 royal6

html代码

                <div class="focus">
                    <!-- 左侧按钮 -->
                    <a href="javascript:void(0);" class="arrow-l"> &lt; </a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:void(0);" class="arrow-r"> &gt; </a>
                    <ul>
                        <li><img src="upload/focus.png"></li>
                        <li><img src="upload/focus1.jpg"></li>
                        <li><img src="upload/focus2.jpg"></li>
                        <li><img src="upload/focus3.jpg"></li>
                    </ul>
                    <ol class="circle"></ol>
                </div>

 

css代码

*{
    margin: 0;
    padding: 0;
}
ol{list-style: none;}
a{text-decoration: none;}
.focus{
    position: relative;
    float: left;
    width: 721px;
    height: 455px;
    background-color: blue;
    overflow: hidden;
}

.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}

.focus ul li {
    float: left;
}

.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 24px;
    height: 40px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    z-index: 2;
}

.arrow-r {
    right: 0;
}

.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}

.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}

.current {
    background-color: #fff;
}

CSS Code

 

JavaScript代码

window.addEventListener(‘load‘,function(){
    //1.获取元素
    var arrow_l = document.querySelector(‘.arrow-l‘);
    var arrow_r = document.querySelector(‘.arrow-r‘);
    var focus = document.querySelector(‘.focus‘);
    
    //2.鼠标经过显示左右按钮
    focus.addEventListener(‘mouseenter‘,function(){
        arrow_l.style.display = ‘block‘;
        arrow_r.style.display = ‘block‘;
        //停止定时器,并清空
        clearInterval(timer);
        timer = null;
    });
    focus.addEventListener(‘mouseleave‘,function(){
        arrow_l.style.display = ‘none‘;
        arrow_r.style.display = ‘none‘;
        timer = setInterval(function(){
            //手动调用点击事件
            arrow_r.click();
        },2000);
    });
    
    //3.动态生成圆圈
    var ul = focus.querySelector(‘ul‘);
    var ol = focus.querySelector(‘ol‘);
    for(var i=0; i<ul.children.length; i++){
        var li = document.createElement(‘li‘);
        li.setAttribute(‘index‘,i);
        //给li绑定点击事件
        li.addEventListener(‘click‘, function(){
            for(var i=0; i<ol.children.length; i++){
                ol.children[i].className = ‘‘;
            }
            this.className = ‘current‘;
            //点击圆点,移动图片
            var index = this.getAttribute(‘index‘);
            //当点击某个圆点,需要把索引给num和circle
            num = circle = index;
            animate(ul, -index * focus.offsetWidth);
        });
        ol.appendChild(li);
    }
    //第一个小圆点默认选中状态
    ol.children[0].className = ‘current‘;
    
    //4. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    
    //5.点击右侧按钮,滚动一张图片
    var num = 0;
    //circle 控制小圆点的播放
    var circle = 0;
    arrow_r.addEventListener(‘click‘,function(){
        //判断是否最后一张,则返回第一张图片位置
        if(num == ul.children.length-1){
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focus.offsetWidth);
        
        //小圆点跟随移动
        circle++;
        circle = circle == ol.children.length? 0 : circle;
        //调用小圆点变换函数
        circleChange();
    });
    
    //6.左侧按钮实现
    arrow_l.addEventListener(‘click‘,function(){
        //判断是否第一张图片,返回最后一张图片位置
        if(num == 0){
            num = ul.children.length-1;
            ul.style.left = -num * focus.offsetWidth + ‘px‘;
        }
        num--;
        animate(ul, -num * focus.offsetWidth);
        
        //小圆点跟随移动
        circle--;
        circle = circle < 0? ol.children.length -1 : circle;
        //调用小圆点变换函数
        circleChange();
    });
    
    function circleChange(){
        for(var i=0; i<ol.children.length; i++){
            ol.children[i].className = ‘‘;
        }
        ol.children[circle].className = ‘current‘;
    }
    
    //7.自动播放
    var timer = setInterval(function(){
        //手动调用点击事件
        arrow_r.click();
    },2000);
});

 

还有自己封装的动画函数

function animate(obj, target, callback) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + ‘px‘;
    }, 15);
}

animate Code