JS制作轮播图——自学笔记

需求： 1.鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏
            2.鼠标点击右侧按钮，图片轮播
            3.小圆圈跟着图片变化
            4.点击小圆圈播放图片
            5.鼠标离开，图片自动轮播，鼠标在图片上时自动轮播停止

目录

html结构

css结构

js结构

html+css代码

js代码段

引入的animate代码段

引入animate

运行结果

---

html结构：

        大盒子，左右按钮，小圆点，ul（滚动的长条），li放a和图片

css结构：

        li必须在一行（小li浮动）——float：left
        设置ul的宽度大一点（图片宽度*图片数量）——ul.width:500%

js结构: 

1.鼠标经过轮播图，左右按钮显示，鼠标离开按钮隐藏
        先隐藏：display：none
        鼠标经过显示：大盒子.addeventlistener（“mouseenter”，funcion（）{ 左右按钮。style。display = “block” }）

大盒子.addeventlistener（“mouseenter”，funcion（）{ 左右按钮.style.display = “block” }）

        鼠标离开隐藏：mouseleave

    2.动态生成小圆圈
        ol.li = ul.li 
        用for循环，
        动态的创建小li（创建节点：createElement（“li”）），
        把小li插入到ol里去（插入节点：ol.appendChild（li））
        把ol里的第一个小li添加白色底色，添加类（ol.children[0].className = "creent"）

    3.点击哪个小圆圈，哪个小圆圈就会变白（排他思想）
        在生成小圆圈的时候就添加点击事件，然后执行排他思想
        干掉所有人，把所有的小li清除 current类（循环清空）
        点击当前小圆圈，就添加curren类

    4.点击小圆圈图片滑动
        引入animater.js，这个animater.js要写到index.js上面
        ul要有定位才能使用animater函数
        注意：这里时ul在移动而不是小li在动
        ul移动的距离=小圆圈索引号*图片的长度（图片向左是负的）
        图片的宽度：图片.focusWidth
        小圆圈的索引号通过自定义属性
        设置索引号：li。setAttribute（“index”，i）；
        获得索引号：var index = this。getAttribut（“index”）；

    5.点击右侧按钮，图片滚动一张
        添加点击事件
        添加全局变量num，每点击一次就然后num++，num就是第几个图片的意思了
        使用animater.js，和点击小圆圈一样
        无缝滚动：让js把第一张图片的li复制一份放到最后，然后设置left=0，再按一次的时候就到第二张了。
        js克隆(先生成再克隆)：克隆第一张图片（var firest = ul.children[0].clineNode=(true)）
        克隆的放ul最后：ul。appendChild（first）
        如果num == 4（ul。children。length-1），ul.style.left = 0；num=0；

    6.点击右侧按钮，小圆点跟着右侧按钮走
        添加一个全局变量circle，每点击一次，就自增1
        然后清除其他小圈圈的白色（循环清除类名）
        留下当前cirle索引号的小圆圈的白色 ol.childe[circle].className = "curren";
        如果circle为最后一个（ol.childen.length）了，就让circlle=0；
        bug：小圆圈和右侧按钮有存在不同步问题
        修复bug：点击了哪个小li就让这个小li的索引号给num，再将小li的索引号给circle
                num = index ；circle = index；
    7.点击左侧按钮和右侧一样
        num--
        num的而判断应该是：如果num为第一张图片num=0，则跳到跳到最后一张图片的位置num = ul.children.length-1；ul.style.left = -num*lunboWidth + "px";
        circle--；
        如果小圆圈的索引号为<0，circle=0则跳到最后一个小圆圈：circle = ol.children.length-1;
    8.鼠标不在大盒子上方的时候自动轮播图片
        手动调用事件 arrow_r.click（）
        用定时器使用手动调用事件，调用的是右按钮的事件。
        再在鼠标放上去的时候清除定时器，鼠标没在上面的时候就启用定时器（要给定时器名字）
    clearInterval(timer);//停止
          timer = null ;//清除

html+css代码

    

    

        <
        >
        

            

            

            

            

        
        


        
    

js代码段

引入的animate代码段

function animate(obj,target,callbrak){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        if(obj.offsetLeft == target){
            clearInterval(obj.timer);
            // 回调函数写在定时器里面
            if(callbrak){
                callbrak();
            }
        }
        var step = (target - obj.offsetLeft)/10;
        step = step>0?Math.ceil(step):Math.floor(step);
        obj.style.left = obj.offsetLeft +step+"px";
    },15)
}

引入animate

在html中书写，并且，如果又index.js的话，要将animate写在index上面，因为index要引入animater，需要先有animate再有index

运行结果

js轮播图视频