2020-09-24

焦点图做法：
1、html主体结构

 <div class="w">
        <div class="main w">
            <div class="focus fl">
                <ul>
                    <li>
                        <a href="javascript:;"><img src="images/focus.png" alt="" ></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="images/focus1.jpg" alt="" ></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="images/focus2.jpg" alt="" ></a>
                    </li>
                    <li>
                        <a href="javascript:;"><img src="images/focus3.jpg" alt="" ></a>
                    </li>
                </ul>
                <a href="javascript:;" class="arrow_r">></a>
                <a href="javascript:;" class="arrow_l"><</a>
                <ol>
                  
                </ol>
            </div>

2、css样式

.main{
    height: 467px;
    width: 980px;
    margin-left: 220px;
}
.current{
    background-color: #fff;
}
.focus{
    position: relative;
    width: 721px;
    height: 462px;
    margin-top: 12px;
    overflow: hidden;
    
}
.focus ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
}
.focus .arrow_r,.focus .arrow_l{
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width:24px ;
    height: 40px;
    background-color: rgba(0,0,0,0.3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 18px;
    z-index: 2;
}
.focus .arrow_l{
    left: 0;
}
.focus .arrow_r{
    right: 0;
}
.focus ol{
    position: absolute;
    left: 40px;
    bottom: 20px;
}
.focus ol li{
    float: left;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.5);
}
.focus ul li{
    float: left;
}

3、js代码块
1、缓动动画函数

function animate(obj, target, callback) {
    clearInterval(obj.timer);//函数刚开始运行就清楚定时器，这样就不会出现多次点击按钮添加多个定时器的情况
    obj.timer = setInterval(function () {//采取给obj添加对象属性来避免需要不断开辟内存空间
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            callback && callback();
        } else {
            obj.style.left = obj.offsetLeft + step + 'px';
        }

    }, 15)
}

2、主体函数

window.addEventListener('load', function () {
    var focus = document.querySelector('.focus');
    var arrowr = document.querySelector('.arrow_r');
    var arrowl = document.querySelector('.arrow_l');
    var olOfFocus = focus.querySelector('ol');           //focus的ul
    var ulOfFocus = focus.querySelector('ul');          //focus的ol
    var focusWidth = focus.offsetWidth;
    //1、添加鼠标经过焦点图的事件，当鼠标经过的时候，两侧的箭头显示，鼠标离开的时候两侧的鼠标隐藏
    focus.addEventListener('mouseenter', function () {
        arrowr.style.display = 'block';
        arrowl.style.display = 'block';
       clearInterval(timer);
       timer=null;
    })
    focus.addEventListener('mouseleave', function () {
        arrowr.style.display = 'none';
        arrowl.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrowr.click();
        }, 2000);
    })
    //2、(1)让下方的小圆点自动随着焦点图片数量的变化而变化，有几个图就自动生成几个小圆点
    //   (2)顺便添加自定义属性data-index，为后边点击小li图片就显示做准备
    for (var i = 0; i < ulOfFocus.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('data-index', i);
        olOfFocus.appendChild(li);
    }
    //3、给每个小圆点添加点击事件，使得鼠标点击小圆点的时候就播放对应的图片，此时需要用到之前封装好的动画函数
    olOfFocus.children[0].className = 'current';
    var dataIndex = 0;
    for (var i = 0; i < olOfFocus.children.length; i++) {  //给每个小圆点都添加点击事件
        olOfFocus.children[i].addEventListener('click', function () {
            for (var j = 0; j < olOfFocus.children.length; j++) {
                olOfFocus.children[j].className = ''  //每次点击小圆点之前先清楚其他的current类
            }
            this.className = 'current';
            // animate(obj, target,callback) 之前封装好的动画函数，三个形参分别为动画执行对象，动画执行目标，以及动画函数结束之后执行的回调函数
            dataIndex = this.getAttribute('data-index');//点击小圆点，获取当前的data-index数值
            num = dataIndex;//涉及到下面的左右箭头，当我们点击小圆点的时候，图片的移动距离会变化，因此相应的num值也要改变，num功能见40行代码
            animate(ulOfFocus, -dataIndex * focusWidth);//让我们的ul移动相应的距离

        })
    }
    //4、给右箭头添加点击函数，使得点击右箭头的时候可以实现焦点图片的滑动,点击一下滑动一个图片的距离，但是多次点击不可能一直滑动，所以要有监视，用num
    //为了让箭头走到最后一张图片的时候更加丝滑，所以我们再克隆最后一张图片，如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
    var first = ulOfFocus.children[0].cloneNode(true);
    ulOfFocus.appendChild(first);
    var num = 0;
    //节流阀（防止用户快速连续点击）采用回调函数
    var flag=true;
    arrowr.addEventListener('click', function () {
       if(flag){
           flag=false;
        if (num == olOfFocus.children.length) {
            num = 0;
            ulOfFocus.style.left = 0;
        }
        num++;//点击一次，num++
        for (var j = 0; j < olOfFocus.children.length; j++) {
            olOfFocus.children[j].className = ''  //每次点击之前先清楚其他的current类
        }
        if(num==4){
            olOfFocus.children[0].className = 'current';
        }
        else{
            olOfFocus.children[num].className = 'current';
        }
        
        animate(ulOfFocus, -num * focusWidth,function(){
            flag=true;
        });
       }
        

    })
    //5、给左箭头添加点击函数，使得点击左箭头的时候可以实现焦点图片的滑动,点击一下滑动一个图片的距离，但是多次点击不可能一直滑动，所以要有监视，用num
    arrowl.addEventListener('click', function () {
        if(flag){
            flag=false;
            if (num == 0) {
                num = olOfFocus.children.length;
                ulOfFocus.style.left = -num * focusWidth + 'px';
            }
            num--;
            for (var j = 0; j < olOfFocus.children.length; j++) {
                olOfFocus.children[j].className = ''  //每次点击之前先清楚其他的current类
            }
            olOfFocus.children[num].className = 'current';
            animate(ulOfFocus, -num * focusWidth,function(){
                flag=true;
            });
        }
       
    })
    var timer = setInterval(function() {
        //手动调用点击事件
        arrowr.click();
    }, 2000);

})