标签：鼠标 实现 JS 图片 按钮 播放 轮播

//用JS实现轮播图：
// 主要功能
/*
    1、鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮
    2、点击右按钮依次，图片往左播放一张，依次类推，左按钮同理
    3、图片播放的时候，下面的小圆圈跟着一起变化
    4、点击小圆圈，可以播放相应图片
    5、鼠标不经过轮播图，轮播图也会自动播放图片
    6、鼠标经过，轮播图模块，自动播放停止
*/
var timer;
function activeCircle(ol, num)
{
    for (var j=0; j<ol.children.length; j++) {
        ol.children[j].classList.remove('current');
    }
    ol.children[num].classList.add('current');
}

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

    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('.circle');
    var num = 0;
    for(var i = 0; i < ul.children.length; i++) {
        //创建一个li
        var li = document.createElement('li');
        li.setAttribute('index', i);
        // 生成小圆圈的同时，绑定点击事件
        //利用排他思想，干掉所有人，再把自己的这个属性加上
        li.addEventListener('click', function(){
                for (var j=0; j<ol.children.length; j++) {
                    ol.children[j].classList.remove('current');
                }
                this.classList.add('current');
                // 点击小圆圈移动图片，移动是ul而不是li
                // 当前点击li的索引
                var index = this.getAttribute('index');
                num = index;
                console.log(ul,index*ul.children[index].offsetWidth);
                animate(ul,-index*ul.children[index].offsetWidth);
            
        })
        ol.appendChild(li);
    }
    //默认把一个li插入到ol中
    ol.children[0].className = 'current';
    var flag = true;
    
    //点击右侧按钮图片滚动一张
    arrow_r.addEventListener('click', function(){
        if (flag) {//设置节流阀，防止多次点击的时候切换过快的问题
            flag = false;
            //    num +1 <ul.children.length ? num++ : num=0;
            //     console.log(-num * ul.children[num].offsetWidth);
            //     animate(ul, -num * ul.children[num].offsetWidth);
            // 如果走到了最后那么这里的值要变成-1,此时我们要直接设置ul的left值为0,而不使用动画效果
            if (num == 3) {
                ul.style.left = 0;
                num = -1;
            }
            num++;
            console.log(flag);
            animate(ul, -num * ul.children[num].offsetWidth,function(){
                flag = true;
            });
            activeCircle(ol, num);
        }
    })

    arrow_l.addEventListener('click', function(){
        if (flag) {
            flag = false;
            if(num <=0) {
                num = ul.children.length-1;
                ul.style.left = -num * ul.children[num].offsetWidth + 'px';
            } else {
                num--;
            }
            animate(ul, -num * ul.children[num].offsetWidth, function(){
                flag = true;
            });
            activeCircle(ol, num);
        }
        
    })

    // 设置定时器,setInterval变量定义是全局变量吗
   timer = setInterval(function(){
       arrow_r.click();//手动调用右侧按钮点击事件，不需要用户去触发
    }, 2000);
})

标签：鼠标,实现,JS,图片,按钮,播放,轮播
来源： https://www.cnblogs.com/yansunda/p/15979903.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。