js轮播图学习总结及案例

最新推荐文章于 2022-08-02 22:38:31 发布

我敲代码养你啊！！！

最新推荐文章于 2022-08-02 22:38:31 发布

阅读量690

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45725033/article/details/103646929

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js轮播图有闪现的、过渡的，有横向的，竖向的，其中各有区别，但大体上差不多，需要自己去体会总结，我就直接上代码了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../todo.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 500px;
            margin: 0 auto;
        }

        #view {
            width: 500px;
            margin: 0 auto;
            height: 300px;
            border: 5px solid black;
            overflow: hidden;
            position: relative;
        }

        #banner li {
            float: left;
            overflow: hidden;
        }

        #banner img {
            width: 500px;
            height: 300px;
        }

        #banner {
            width: 2500px;
            overflow: hidden
        }

        #prev {
            float: left;
        }

        #next {
            float: right;
        }

        section {
            left: calc(50% - 80px);
            position: absolute;
            bottom: 10px;
        }

        span {
            margin: 0 10px;
            float: left;
            width: 15px;
            height: 15px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="view">
        <ul id="banner">
            <li><img src="../2019-12-11dom事件/img/1.jpg" alt=""></li>
            <li><img src="../2019-12-11dom事件/img/2.jpg" alt=""></li>
            <li><img src="../2019-12-11dom事件/img/3.jpg" alt=""></li>
            <li><img src="../2019-12-11dom事件/img/4.jpg" alt=""></li>
            <li><img src="../2019-12-11dom事件/img/1.jpg" alt=""></li>
        </ul>
        <section>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </section>
    </div>
    <div>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
    <script>
        var banner = document.getElementById('banner')
        var list = document.querySelectorAll('#banner>li')
        // var list=document.getElementsByTagName('li')
        var btns = document.getElementsByTagName('span')
        var view = document.getElementById('view')
        var index = 0;
        var flag = true; //加个锁 是为了决绝bug（点击过快出现空白）
        // 下一张
        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) {
                    // 1.先让第一张切到最后一张，瞬间
                    // 2.在让最后一张往前切一张 ，平滑切到图片4
                    banner.style.marginLeft = (-500 * (list.length - 1)) + 'px'
                    index = list.length - 2
                    // 或者再   index--
                }
                $_animation(banner, 'marginLeft', -500 * index, 1000)
                flag = false;
            }

        }

        next.onclick = nextShow
        prev.onclick = prevShow


        // 初始化  点 颜色
        btns[0].style.backgroundColor = 'red'
        // 给4个原点绑定点击事件

        // 方法一
        // for(let i=0;i<btns.length;i++){
        //    
        //     btns[i].οnmοuseenter=function(){
        //         // 初始化 颜色
        //       for(var j=0;j<btns.length;j++){
        //           btns[j].style.backgroundColor='blue'
        //       }
        //       btns[i].style.backgroundColor='red'//用var报错，因为异步的，i变成5了
        //     }
        // }

        // 方法二
        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)

                btns[this.i].style.backgroundColor = 'red'//用var报错，因为异步的，i变成5了,   解决办法2个：1.var换成let 用i    2.用var   this.i
            }
        }


        // 加定时器
        var timer = setInterval(nextShow, 3000)
        // 当鼠标移入view 时  清除定时器
        view.onmouseenter = function () {
            clearInterval(timer)
        }
        // 当鼠标移出view 时  开启定时器
        view.onmouseleave = function () {
            var timer = setInterval(nextShow, 3000)
        }

    </script>
</body>

</html>

我敲代码养你啊！！！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图学习总结及案例

js轮播图有闪现的、过渡的，有横向的，竖向的，其中各有区别，但大体上差不多，需要自己去体会总结，我就直接上代码了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫