轮播图（含全部代码：html、css、javascript）

Cap07

已于 2023-03-20 21:30:23 修改

阅读量6.1k

点赞数 12

文章标签： javascript html css

于 2022-07-31 22:20:36 首次发布

本文链接：https://blog.csdn.net/m0_51928176/article/details/126091395

版权

代码

h1.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>

    <link rel="stylesheet" href="index.css">
    <script src="animate.js"></script>
</head>
<body>
    <div class="box">
        <a href="javascript:;" class = 'left jiantou'>&lt;</a>
        <a href="javascript:;" class = 'right jiantou'>&gt;</a>
        <ul class = 'pic'>
            <li>
                <a href="#"><img src="./images/1.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/2.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/3.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/4.png" alt=""></a>
            </li>
             <li>
                <a href="#"><img src="./images/5.png" alt=""></a>
            </li>
        </ul>
        <ul class="lis">
            <!-- <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
    </div>
    <script src="index.js"></script>
</body>
</html>

index.css：

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.box{
    position: relative;
    overflow: hidden;
    margin: 100px auto;
    width: 520px;
    height: 280px;
    background-color: red;
}
.jiantou{
    font-size: 24px;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 20px;
    height: 30px;
    line-height: 30px;
    background: rgba(158, 154, 154, 0.7);
    color: white;
    z-index: 999;
}
.left{
    position: absolute;
    top: 125px;
    left: 0px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.right{
    position: absolute;
    top:125px;
    left: 500px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
img{
    width: 520px;
    height: 280px;
}
.box .pic{
    width: 600%;
}
.pic{
    position: absolute;
}
.pic li {
    float: left;
}
.lis{
   position: absolute;
   bottom: 15px;
   left: 50%;
   margin-left: -35px;
   width: 70px;
   height:13px;
   border-radius: 7px; 
   background: rgba(158, 154, 154, 0.7);
}
.lis li {
    float: left;
    width: 8px;
    height: 8px;
    margin: 3px;
    border-radius: 50%;
    background-color: #fff;
   
}
.lis .selected{
    background-color: cyan;
}

index.js：

var pic = document.querySelector('.pic');
var lis = document.querySelector('.lis');
var leftarrowhead = document.querySelector('.left');
var rightarrowhead = document.querySelector('.right');
var box = document.querySelector('.box');

var index = 0;


//形成小圆圈li
//注意此模块要放上面从而事先形成li
for (var i = 0; i < pic.children.length; i++) {
    var li = document.createElement('li');
    lis.appendChild(li);

    //顺便设置li的索引
    li.setAttribute('index', i);
}
lis.children[0].className = 'selected';




var pictureWidth = box.offsetWidth;   //获取图片宽度
//排他思想，设置li的点击效果
for (var j = 0; j < lis.children.length; j++) {
    lis.children[j].onclick = function () {
        for (var i = 0; i < lis.children.length; i++) {
            lis.children[i].className = '';
        }
        index = this.getAttribute('index'); 
        this.className = 'selected';
        animate(pic, -index * pictureWidth);
    }
}



var flag = true;

//克隆第一张图片放最后
var first = pic.children[0].cloneNode(true);
pic.appendChild(first);



//设置箭头的移动
//左箭头
leftarrowhead.addEventListener('click', function () {
    if (flag) {
        flag = false;

        //当移动到最左边时，立即跳到最后一张图片
        if (index == 0) {
            pic.style.left = -lis.children.length * pictureWidth + 'px';
            index = 5;
        }
        index--;
        //节流阀，当动画运行完毕，再释放flag，从而可放开下一次点击箭头效果
        animate(pic, -index * pictureWidth, function () {
            flag = true;
        });

        for (var i = 0; i < lis.children.length; i++) {
            lis.children[i].className = '';
        }
        lis.children[index].className = 'selected';
    }
})


//右箭头
rightarrowhead.addEventListener('click', function () {
    if (flag) {
        flag = false;

        if (index == lis.children.length) {
            pic.style.left = 0;
            index = 0;
        }
        index++;
        animate(pic, -index * pictureWidth, function () {
            flag = true;
        });

        for (var i = 0; i < lis.children.length; i++) {
            lis.children[i].className = '';
        }
        if (index == lis.children.length) {
            lis.children[0].className = 'selected';
        }
        else {
            lis.children[index].className = 'selected';
        }
    }

})




//设置自动轮播（相当于点右箭头），时间间隔2秒
var timer = setInterval(function () {
    rightarrowhead.click();
}, 2000);




var left = document.querySelector('.left');
var right = document.querySelector('.right');

//设置箭头是否显示
box.addEventListener('mouseenter', function () {
    left.style.display = 'block';
    right.style.display = 'block';
    clearInterval(timer);
})

box.addEventListener('mouseleave', function () {
    left.style.display = 'none';
    right.style.display = 'none';
    timer = setInterval(function () {
        rightarrowhead.click();
    }, 2000);
})

animate.js：

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}