美文网首页
怎么用js的原生写法写出来一个轮播图呢?

怎么用js的原生写法写出来一个轮播图呢?

作者: 拾柒_aab0 | 来源:发表于2019-10-20 21:11 被阅读0次

    首先我们来总结一下原理:

    1:排出一个版,包含上下切换的标识和图片导航,所有图片隐藏,给图片第一张加一个class名,样式设为显示,图片导航的第一个加一个class名,加上背景色;
    2:获取节点;
    3:给向下切换写一个点击事件,点击图片切换到下一张,注意当图片切换到最后一张的时候会报错,所以必须要判断一下,当图片切换到最后一张的时候在,再次击会切换到第一张;
    4:给向上切换写一个点击事件,注意当图片切换到第一张之后会报错,所以必须要判断一下,当图片切换到第一的时候,再次点击会切换到最后张,循环起来;
    5:写一个定时器,定时器的播放顺序和向下切换一致,可以封装一个函数方便调用;
    6:写鼠标划入事件,清除定时器;
    7:写鼠标移出事件,定时器继续运行;
    8:图片导航的点击事件

    需要用到的知识点

    点击事件click
    定时器setlnterval()
    if判断
    for()循环

    第二步

    var box = document.querySelector('.box');//获取box
    var last = document.querySelector('.last');//获取 
    var next = document.querySelector('.next');
    var imgs = document.querySelectorAll('ul li');
    var ol_li = document.querySelectorAll('ol li');
    
    var time = null, index = 0;
    

    第三步

    next.onclick = function () {//向下切换的点击事件
        auto();
    }
    function auto() {//封装一个向下切换的函数
        index++;//图片向后走
        console.log(imgs.length)
        if (index > imgs.length - 1) {//判断
            index = 0;
        }
        getOther(index)
    }
    

    封装一个排他的函数

    function getOther(ind) {//封装一个排他的函数
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].className = '';
            ol_li[i].className = '';
        }
        imgs[index].className = 'active';
        ol_li[index].className = 'active1';
    }
    

    第五步

    time = setInterval(function () {//定时器
        auto()
    }, 1000);
    

    第四步

    last.onclick = function () {//向上切换的点击事件
        index--;
        if (index < 0) {
            index = imgs.length - 1;
        }
        getOther(index);
    }
    

    第六步

    box.onmouseover = function () {//鼠标移入事件
        clearInterval(time);
        time = null;
    }
    

    第七步

    box.onmouseout = function () {//鼠标移出事件
        time = setInterval(function () {
            auto();
        }, 1000);
    }
    for (var i = 0; i < ol_li.length; i++) {
        ol_li[i].ind = i;//标记当前下标
    
        ol_li[i].onclick = function () {
            index = this.ind;绑定当前下标
            getOther(this.ind);
        }
    }

    相关文章

      网友评论

          本文标题:怎么用js的原生写法写出来一个轮播图呢?

          本文链接:https://www.haomeiwen.com/subject/acwamctx.html