网页轮播图

最新推荐文章于 2023-07-16 14:54:03 发布

☀️오동동

最新推荐文章于 2023-07-16 14:54:03 发布

阅读量316

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/TongWu1/article/details/106035311

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <!-- 因为index.js引用animate.js，所以animate.js必须在其之前引入 -->
    <script src="animate.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <div class="main">
        <ul class="focus">
            <li><a href="#"><img src="upload/focus.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus1.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus2.jpg" alt=""></a></li>
            <li><a href="#"><img src="upload/focus3.jpg" alt=""></a></li>
        </ul>
        <a href="javascript:;" class="leftarrow">&lt;</a>
        <a href="javascript:;" class="rightarrow">&gt;</a>
        <ol class="circle">
        </ol>
    </div>
</body>

</html>

css样式

* {
    margin: 0;
    padding: 0;
}
ul,ol {
    list-style: none;
}
img {
    vertical-align: middle;
}
.main {
    position: relative;
    top: 0;
    left: 0;
    height: 455px;
    width: 721px;
    overflow: hidden;
}
ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    /* overflow: hidden; */
}
ul li {
    float: left;
}
.leftarrow {
    display: none;
    position: absolute;
    top: 210px;
    left: 0;
    padding: 10px 10px 10px 5px;
    color: white;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 0 22px 22px 0;
    background:rgba(0, 0, 0, .5); 
    z-index: 2;
}
.rightarrow {
    display: none;
    position: absolute;
    top: 210px;
    left: 688px;
    padding: 10px 10px 10px 5px;
    color: white;
    font-size: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 22px 0  0 22px;
    background:rgba(0, 0, 0, .5); 
    z-index: 2;
}
.circle {
    position: absolute;
    top: 430px;
    left: 310px;
}
.circle li {
    float: left;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
}
.current {
    background-color: #fff;
}

缓动动画函数JS代码

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

轮播图JS代码

window.addEventListener('load', function () {
    var main = document.querySelector('.main');
    var leftArr = document.querySelector('.leftarrow');
    var rightArr = document.querySelector('.rightarrow');
    var focus = document.querySelector('.focus');
    var circle = document.querySelector('.circle');
    var focusWidth = focus.children[0].offsetWidth;
    focus.addEventListener('mouseenter', function () {
        leftArr.style.display = 'block';
        rightArr.style.display = 'block';
        clearInterval(timer);
    });
    focus.addEventListener('mouseleave', function () {
        leftArr.style.display = 'none';
        rightArr.style.display = 'none';
        timer = setInterval(function () {
            // 手动调用右箭头点击函数
            rightArr.click();
            // console.log('hh');
        }, 2000);
    });
    // 3.动态创建小圆圈
    for (var i = 0; i <= focus.children.length - 1; i++) {
        var lis = document.createElement('li');
        circle.appendChild(lis);
        lis.setAttribute('data-index', i);
        lis.addEventListener('click', function (e) {
            for (var i = 0; i <= circle.children.length - 1; i++) {
                circle.children[i].className = '';
            }
            this.className = 'current';
            console.log(this.getAttribute('data-index'));
            var currIndex = this.getAttribute('data-index');
            num = currIndex;
            cirNum = currIndex;
            var target = -focusWidth * currIndex;
            animate(focus, target);
        })
    }
    circle.children[0].className = 'current';
    var firstli = focus.children[0].cloneNode(true);
    focus.appendChild(firstli);
    //右按钮移动
    var num = 0;
    var cirNum = 0;
    // 节流阀防止右箭头点击过快
    var flag = true;
    rightArr.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == focus.children.length - 1) {
                focus.style.left = 0;
                num = 0;
            }
            num++;
            cirNum++;
            if (circle.children.length == cirNum) {
                cirNum = 0;
            }
            circleChange();
            var target = -focusWidth * num;
            animate(focus, target, function () {
                flag = true;
            });
        }
    })
    //左按钮移动
    leftArr.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = focus.children.length - 1;
                focus.style.left = -focusWidth * num + 'px';
            }
            num--;
            var target = -focusWidth * num;
            animate(focus, target, function () {
                flag = true;
            });
            cirNum--;
            if (cirNum < 0) {
                cirNum = circle.children.length - 1;
            }
            circleChange();
        }
    })
    // 自动播放
    var timer = setInterval(function () {
        // 手动调用右箭头点击函数
        rightArr.click();
        // console.log('hh');
    }, 2000);
    // 改变小圆圈
    function circleChange() {
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].className = '';
        }
        circle.children[cirNum].className = 'current';
    }
})

存在问题：
1.左右箭头会闪动
2.轮播图播放会卡
3.css和html粗糙

☀️오동동

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页轮播图

html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="in
复制链接

扫一扫