js手写轮播图--滑动轮播（缓步动画）

CoolPomelo

于 2023-05-26 16:02:20 发布

阅读量131

点赞数

分类专栏： js 文章标签： javascript css html

本文链接：https://blog.csdn.net/yuan_1216/article/details/130875335

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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>滑动轮播</title>
    <link rel="stylesheet" href="轮播.css">
    <script src="animate.js"></script>

</head>


<body>
    <div>
        <ul>
            <li><img src="1.jpeg" alt=""></li>
            <li><img src="2.jpeg" alt=""></li>
            <li><img src="3.jpeg" alt=""></li>
            <li><img src="4.jpeg" alt=""></li>
        </ul>
        <img src="../向左.png" alt="" id="back">
        <img src="../向右.png" alt="" id="next">
        <ol></ol>
    </div>

    <script src="轮播.js"></script>
</body>

/****************缓步动画函数******************* */
function animate (obj, target, callback) {
    // 清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        // 步长写到定时器  步长公式：（目标值-现在的位置）/10
        var step = (target - obj.offsetLeft) / 10;
        // 把步长改为整数，不要出现小数问题
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止定时器
            clearInterval(obj.timer);
            // 动画结束后调用，例：节流阀！！！
            if (callback) {
                callback();
            }
        }
        // 把每次加1这个步长改变为一个慢慢变小的值 
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 10)
}

//按钮
var back = document.getElementById('back');
var next = document.getElementById('next');
// 标签
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
// var ulLis = ul.querySelectorAll('li');

//图片宽度
var imgWidth = ul.getElementsByTagName('img')[0].offsetWidth;

//记录图片对应脚标
var countN = 0;
//记录小圆圈对应脚标
var countC = 0;
//生成小圆圈
for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');
    ol.appendChild(li);
}

//第一个圆圈选中
ol.children[0].className = 'orange';
//点击小圆圈
for (let i = 0; i < ol.children.length; i++) {
    ol.children[i].addEventListener('click', function () {
        //变色
        for (var j = 0; j < ol.children.length; j++) {
            ol.children[j].className = '';
        }
        this.className = 'orange';
        // 对应图片
        countN = i;
        countC = i;
        animate(ul, -i * imgWidth);

    })
}

//第一张图片复制到最后
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);

//下一个按钮点击事件
next.addEventListener('click', function () {
    countN++;
    // countN = countN >= ul.children.length ? 0 : countN;
    if (countN >= ul.children.length) {
        countN = 1;
        ul.style.left = 0;
        animate(ul, -countN * imgWidth);

    }
    animate(ul, -countN * imgWidth);


    countC++;
    countC = countC >= ol.children.length ? 0 : countC;
    for (var j = 0; j < ol.children.length; j++) {
        ol.children[j].className = '';
    }
    ol.children[countC].className = 'orange';
})

back.addEventListener('click', function () {
    countN--;
    // countN = countN < 0 ? ul.children.length : countN;
    if (countN < 0) {
        countN = ul.children.length - 2;
        ul.style.left = -(ul.children.length - 1) * imgWidth + 'px';
        animate(ul, -countN * imgWidth);
    }
    animate(ul, -countN * imgWidth);


    countC--;
    countC = countC < 0 ? ol.children.length - 1 : countC;
    for (var j = 0; j < ol.children.length; j++) {
        ol.children[j].className = '';
    }
    ol.children[countC].className = 'orange';
})

//自动播放
var interval = setInterval(function () {
    //调用下一张按钮点击事件
    next.click();
}, 1000)

//鼠标经过清除计时器
var div = document.querySelector('div');
div.addEventListener('mouseenter', function () {
    clearInterval(interval);

})
//离开
div.addEventListener('mouseleave', function () {
    interval = setInterval(function () {
        next.click();
    }, 1000)
})

*{
    margin: 0 auto;
    padding: 0;
}
div{
    width: 400px;
    height: 200px;
    position: relative;
    overflow: hidden;
    margin-top: 100px;
}
div:hover img{
    display: block;
}
div ul{
    list-style: none;
    width: 1000%;
    position: absolute;
    top: 0;
}
div>img{
    z-index: 10;
    display: none;
}
div>img:hover{
    cursor: pointer;
}
div #back{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
div #next{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
div ul img{
    width: 400px;
    height: 200px;
    float: left;
}
div ol{
    list-style: none;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}
div ol li{
    width: 10px;
    height: 10px;
    float: left;
    margin-left: 8px;
    border-radius: 5px;
    border: 2px solid orange;
}
div ol li:hover{
    cursor: pointer;
}
.orange{
    background-color: orange;
}