Javascript 轮播图

最新推荐文章于 2024-11-02 12:42:04 发布

Ylovd_

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量406

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/Huangmiaomiao1/article/details/123205099

版权

该博客介绍了一个使用JavaScript编写的焦点图轮播功能，包括左右箭头控制、图片无缝滚动、鼠标悬停显示及离开隐藏箭头、点击小圆圈切换图片以及自动播放等特性。通过事件监听和定时器实现动画效果，动态改变图片位置并更新小圆圈选中状态。

摘要由CSDN通过智能技术生成

function animate(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        let 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);
}

window.onload = function load(){
    // 左右箭头设置，鼠标放上来才会出现， 离开就消失
    let focus = document.querySelector('.focus');
    let arrow1 = document.querySelector('.arrow-l');
    let arrow2 = document.querySelector('.arrow-r');
    focus.addEventListener('mouseenter',function() {
        arrow1.style.display = 'block';
        arrow2.style.display = 'block';
    })
    focus.addEventListener('mouseleave',function() {
        arrow1.style.display = 'none';
        arrow2.style.display = 'none';
    })

    // 自动根据图片数量生成对应的小圆圈 + 点击小圆圈时候变色和移动
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for(let i = 0;i<ul.children.length;i++) {
        let li = document.createElement('li');
        // 记录当前小圆圈的索引号
        li.setAttribute('index',i);
        ol.appendChild(li);
        ol.children[0].className = 'current';
        
        li.addEventListener('click',function() {
            for(let j = 0;j<ol.children.length;j++) {
                ol.children[j].className='';
            }
            this.className = 'current';
            // move my pic
            // 获取当前的索引号
            let index = this.getAttribute('index');
            // 当我们点击了某个小li，就应该把这个索引号给cnt
            cnt = index;
            let focusWidth = focus.offsetWidth;
            animate(ul,-index*focusWidth);
        })
    }
    // 无缝滚动
    let fir = ul.children[0].cloneNode(true);
    // 深克隆
    ul.appendChild(fir);

    // 点击箭头，图片进行滚动
    let cnt = 0 ;
    // 节流阀
    let flag = true;
    let focusWidth = focus.offsetWidth;
    arrow1.addEventListener('click',function(){
        if(flag) {
            cnt--;
            if(cnt < 0) {
                cnt = ol.children.length - 1;
                ul.style.left = -cnt *focusWidth +'px';
            }
            animate(ul,-cnt*focusWidth,function() {
                flag = true;
            });
            circleChange(cnt);
        }
    })

    arrow2.addEventListener('click',function(){
       if(flag) {
           flag = false;
            cnt++; 
            // 当遍历到最后一张图片时自动跳转到最前面
            if(cnt == ul.children.length - 1) {
                ul.style.left = 0;
                cnt = 0;
                ol.children[0].className = 'current';
            }
            animate(ul,-cnt*focusWidth,function() {
                flag = true;
            });
            circleChange(cnt);
       }
    })

    function circleChange(cnt) {
        for(let j = 0;j<ol.children.length;j++) {
            ol.children[j].className = '';
        }
        ol.children[cnt].className = 'current';
    }


    // 自动播放，手动调用点击事件
    let timer = setInterval(function() {
        arrow2.click();
    },2000)
}