轮播图

上一张 下一张
<script>
    var banner = document.getElementById('banner');
    var list = document.querySelectorAll('#banner>li');
    var next = document.querySelector('#next');
    var prev = document.querySelector('#prev');
    var btns = document.querySelectorAll('section>span');
    var view = document.getElementById('view')

    var flag = true;
    var index = 0;
    function nextShow() {
        if (flag) {
            index++;
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            if (index >= list.length - 1) {
                btns[0].style.backgroundColor = 'red';
            } else {
                btns[index].style.backgroundColor = 'red';
            }

            $_animation(banner, 'marginLeft', -500 * index, 1000, function () {
                if (index >= list.length - 1) {
                    index = 0;
                    banner.style.marginLeft = 0;
                }
            })
            flag = false;
        }
    }

    function prevShow() {
        if (flag) {
            index--;
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            if (index < 0) {
                btns[list.length - 2].style.backgroundColor = 'red'
            } else {
                btns[index].style.backgroundColor = 'red';
            }
            if (index < 0) {
                index = list.length - 1;
                banner.style.marginLeft = (-500 * (list.length - 1)) + 'px';
                index--;
            }
            $_animation(banner, 'marginLeft', -500 * index, 1000);
            flag = false;
        }
    }

    next.onclick = nextShow;
    prev.onclick = prevShow;


    btns[0].style.backgroundColor = 'red';
    for (var i = 0; i < btns.length; i++) {
        btns[i].i = i;
        btns[i].onmouseenter = function () {
            for (var j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = 'blue';
            }
            index = this.i
            $_animation(banner, 'marginLeft', -500 * index, 1000, function () {
                if (index >= list.length - 1) {
                    index = 0;
                    banner.style.marginLeft = 0;
                }
            })
            btns[this.i].style.backgroundColor = 'red';
        }
    };
    var timer = setInterval(nextShow,2000) 

    //当鼠标移入view时候  清除定时器
    view.onmouseenter = function(){
         clearInterval(timer)
    } 

    view.onmouseleave = function(){
         timer = setInterval(nextShow,2000)
    } 
</script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值