轮播图

最新推荐文章于 2024-05-23 16:01:00 发布

啊坤儿

最新推荐文章于 2024-05-23 16:01:00 发布

阅读量199

点赞数

文章标签： html5 javascript css css3 jquery

本文链接：https://blog.csdn.net/AA2207748005/article/details/111847638

版权

本人第一次写博客，有哪些建议都可以评论在下面回去改进

H5部分

<!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>轮播图</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        li,ol{
            list-style: none;
        }
        .focus {
            margin: 0px auto;;
            position: relative;
            width: 721px;
            height: 455px;
            background-color: purple;
            overflow: hidden;
        }

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

        .focus ul li {
            float: left;
        } 

        .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;
        }

        .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>
    <!--这个必须写在轮播图的上面，因为等下要用不然拿不到  -->
    <script src="./animate.js"></script>
    <script src="./轮播图.js"></script>
    
</head>

<body>
    <div class="focus fl">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l">
            &lt;
        </a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r">  </a>
        <!-- 核心的滚动区域 -->
        <ul>
            <li>
                <a href="#"><img src="./images/focus.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/focus1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/focus2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/focus3.jpg" alt=""></a>
            </li>
            
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
            
        </ol>
    </div>
</body>

</html>

js部分

window.addEventListener('load', function () {
    // this.alert('1')
    //获取元素
    var arrow_l = this.document.querySelector('.arrow-l')
    var arrow_r = this.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_l.click();
        }, 2000)
    })
    //动态生成小圈圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle')
    for (var i = 0; i < ul.children.length; i++) {
        //创建一个li
        var li = document.createElement('li')
        // 记录小圆圈的索引，通过自定义属性来做
        li.setAttribute('index', i)
        ol.appendChild(li)
        //点击小圆圈变成白色排他思想
        li.addEventListener('click', function () {
            // 干掉所有人留下我自己
            for (let i = 0; i < ol.children.length; i++) {

                ol.children[i].className = '';
            }
            this.className = 'current'
            //调用动画函数
            // ul移动的距离就是小圆圈的索引 乘以 图片的宽度 注意是负值
            // 当我们点击了小li就拿到索引
            var index = this.getAttribute('index')
            //当我们点击了小圆点就要把索引给num
            num = index;
            //当我们点击了小圆点就要把索引给circle
            circle = index;
            // console.log(focusWidth)
            animate(ul, -index * focusWidth)
        })
    }
    ol.children[0].className = 'current '
    // 复制克隆第一章图片
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first);
    // 点击右侧按钮
    var num = 0;
    // 为配合点击侧边按钮小圆圈也跟着改变而定的变量需要是一个全局变量
    var circle = 0;
    var flag = true;//节流阀
    arrow_r.addEventListener('click', function () {
        // alert('1')
        // console.log(ul.children.length);
        if (flag) {
            flag = false;//关闭节流阀
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true;//开启节流阀
            })
            circle++;
            // 如果circle==4说明走到了最后也就是我们克隆的那张图片我们需要复原
            if (circle == ol.children.length) {
                circle = 0;
            }
            //调用函数
            circlrCanghe();
        }

    })
    arrow_l.addEventListener('click', function () {
        // alert('1')
        // console.log(ul.children.length);
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            })
            circle--;
            // 如果circle==0说明走到了最后也就是我们克隆的那张图片我们需要复原
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            //调用函数
            circlrCanghe();
        }
    })
    function circlrCanghe() {
        // 排他思想干掉所有人留下我自己
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current'
    }
    var timer = setInterval(function () {
        // 自动调用点击事件
        arrow_l.click();
    }, 2000)
})

啊坤儿

关注

0
点赞
踩
0

收藏

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

H5部分<!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&
复制链接

扫一扫