使用JavaScript实现轮播图效果

本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下

纯js，不使用轮播图控件怎么做轮播图呢，往下看吧

效果图：

1.可点击小圆点切换图片

2.可点击左右按钮切换图片

3.可自动播放

先上CSS和HTML代码：

    

        

            <
             > 
            

                

                    
                
                

                    
                
                

                    
                
                

                    
                
 
            
            

 
            
        
    
 

最后就是JS代码部分了

window.addEventListener('load', function() {
    // 获取要使用到的元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标移动到图片上，显示左右切换的按钮
    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)
    });
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    console.log(ol);
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
    //创建自定义属性index
        li.setAttribute('index', i);
    //根据li（图片）的个数自动添加左下角的小圆点
        ol.appendChild(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 = index;
            circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
    var flag = true;
    //点击'>'进行图片向右切换
    arrow_r.addEventListener('click', function() {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusWidth);
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        circleChange();
    });
    //点击'<'进行图片向左切换
    arrow_l.addEventListener('click', function() {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);
        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';
    }
    //定时器+click（）实现自动播放
    var timer = setInterval(function() {
        arrow_r.click();
    }, 2000)
 
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。