2021/9/15轮播图

最新推荐文章于 2024-08-18 10:54:05 发布

13561198

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量160

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_51677397/article/details/120109998

版权

HTML5 JavaScript 轮播图图片焦点事件监听

关键词由CSDN通过智能技术生成

http://changzy.top/%E8%BD%AE%E6%92%AD%E5%9B%BE/index.html#
节流器很重要

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

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

        li {
            list-style: none;
        }

        .focus {
            left: 800px;
            border-radius: 50px;
            position: relative;
            width: 721px;
            height: 455px;
            background-color: purple;
            overflow: hidden;

        }

        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
            height: 455px;
        }

        .focus ul li {
            float: left;

        }

        img {
            left: 25px;
            width: 720px;
            height: 455px;
        }

        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-family: 'icomoon';
            font-size: 18px;
            z-index: 2;
        }

        .arrow-r {
            right: 0;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .circle {
            position: absolute;
            bottom: 10px;
            left: 50px;
        }

        .circle li {
            float: left;
            width: 8px;
            height: 8px;
            /*background-color: #fff;*/
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            border-radius: 50%;
            /*鼠标经过显示小手*/
            cursor: pointer;
        }

        .current {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="focus fl">
        <a href="#" class="arrow-l">
            &lt;
            <!--<-->
        </a>
        <a href="#" class="arrow-r">
            &gt;
        </a>
        <ul>
            <li><a href="#"><img src="图集网易云/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="图集网易云/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="图集网易云/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="图集网易云/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="图集网易云/5.jpg" alt=""></a></li>
        </ul>
        <ol class="circle">
        </ol>
    </div>
    <script>
        window.addEventListener('load', function () {
            var arrow_l = document.querySelector(".arrow-l");
            var arrow_r = document.querySelector(".arrow-r");
            var focus = document.querySelector(".focus");
            var focusWidth = focus.offsetWidth;
            focus.addEventListener('mouseenter', function () {
                arrow_l.style.display = 'block';
                arrow_r.style.display = 'block';
                clearInterval(timer);
                timer = null;
            })

            focus.addEventListener('mouseleave', function () {
                arrow_l.style.display = 'none';
                arrow_r.style.display = 'none';
                timer = setInterval(function () {
                    arrow_r.click();
                }, 1000)
            })
            var ul = focus.querySelector('ul');
            var ol = focus.querySelector('ol');
            console.log(ul.children.length);
            for (var i = 0; i < ul.children.length; i++) {
                var li = document.createElement('li');
                li.setAttribute('index', i);
                ol.appendChild(li);
                li.addEventListener('click', function () {

                    for (var i = 0; i < ol.children.length; i++) {
                        ol.children[i].className = '';
                    }
                    this.className = 'current';
                    var index = this.getAttribute('index');
                    num = index;
                    circle = index;
                    animate(ul, -index * focusWidth);

                })

            }
            var circle = 0;
            var num = 1;
            ol.children[0].className = 'current';
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            var flag = true;
            arrow_r.addEventListener('click', function () {
                if (flag) {
                    flag = false;
                    var obj = document.querySelector('.current');
                    console.log(obj);
                    index = obj.getAttribute('index');
                    console.log('xx', num);
                    if (num < ul.children.length - 2) {
                        console.log(index);
                        circle = index;
                        num = index;
                        circle++;
                        num++;
                        circleChange();

                        animate(ul, -circle * focusWidth);
                        console.log('l');

                    }
                    else if (num == ul.children.length - 2) {
                        animate(ul, -5 * focusWidth);
                        num++;
                        circle = 0;
                        circleChange();
                    }
                    else if (num == ul.children.length - 1) {
                        num = 1;
                        console.log('s');
                        ul.style.left = 0;
                        animate(ul, -1 * focusWidth);
                        circle = 1;
                        circleChange();
                    }
                    flag = true;
                    console.log(flag);
                }

            })
            arrow_l.addEventListener('click', function () {

                if (flag) {
                    flag = false; var obj = document.querySelector('.current');
                    console.log(obj);
                    index = obj.getAttribute('index');
                    console.log(index);
                    if (circle > 0) {
                        circle = index;

                        circle--;
                        circleChange();

                        animate(ul, -circle * focusWidth);
                    }
                    else { }
                    flag = true;}
                })
            function circleChange() {
                // 先清除其余小圆圈的current类名
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                // 留下当前的小圆圈的current类名
                ol.children[circle].className = 'current';
            }
            // 10. 自动播放轮播图
            var timer = setInterval(function () {
                //手动调用点击事件
                arrow_r.click();
            }, 1000);

        })






    </script>
</body>

</html>

```javascript
function animate(obj,target,callback){
    clearInterval(obj.timer);
    obj.timer = setInterval(() => {
        var step=(target-obj.offsetLeft)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            callback && callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
        
    }, 15);
}

13561198

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
2021/9/15轮播图

http://changzy.top/%E8%BD%AE%E6%92%AD%E5%9B%BE/index.html#节流器很重要<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
复制链接

扫一扫