js轮播图有，移入移出事件，左右滑动事件功能

天香自然，地上红豆

于 2024-06-14 09:24:52 发布

阅读量371

点赞数 3

文章标签： javascript css css3

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/139669706

版权

效果图：

具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .banner {
        width: 100%;
        height: 500px;
        overflow: hidden;
        position: relative;
    }

    .tow {
        width: 600%;
        height: 500px;
        margin-left:0%;
        display: flex;
        display: relative;
        /* transition: 1s all ; */
    }

    .tow img {
        width: 100%;
        height: 100%;
    }

    .five {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        bottom: 0;
        border: 1px solid lightgray;

    }

    .five span {
        width: 15px;
        height: 15px;
        display: block;
        background-color: antiquewhite;
        border-radius: 50%;
        display: flex;



    }

    .but {
        width: 100%;
        height: 30px;
        position: absolute;
        border-radius: 50%;
        top: 37%;

        display: flex;
        justify-content: space-between;

    }

    .but span {
        display: none;
        background-color: aqua;
    }

    .banner:hover .but span {
        display: block;
    }
</style>
<body>
<div class="banner">
    <div class="tow">
        <img src="img/ou.jpg" alt="" class="mlShow">
        <img src="img/oui.jpg" alt="">
        <img src="img/tu.jpg" alt="">
        <img src="img/opp.jpg" alt="">
		<img src="img/iu.jpg" alt="" />
		<img src="img/yu.jpg" alt="" />
    </div>
    <div class="five"></div>
    <div class="but">
        <span>&lt;</span>
        <span class="one">&gt;</span>
    </div>
</div>
<script>
    let banner = document.getElementsByClassName('banner')[0];//获取所有内容的标签
    let tow = document.getElementsByClassName('tow')[0];//获取所有图片的标签
    let img = tow.children; //获取图片子元素
    let imgWidth = img[0].offsetWidth;//图片宽度自适应
    let five = document.getElementsByClassName('five')[0];//获取所有小圆点的标签
    let but = document.getElementsByClassName('but')[0];//获取所有按钮的标签
    let butItem = but.children;//获取按钮子元素
    let index = 0;//初始下标为零
    let times = setInterval(scrolls, 2000); //设置定时器

    // 动态生成小圆点
    for (let i = 0; i < img.length; i++) {
        let dot = document.createElement('span'); // 创建一个 span 元素
        dot.classList.add('dot'); // 添加 dot 类名
        five.appendChild(dot); // 将创建的小圆点添加到五个按钮的容器中
    }

    function scrolls() {  //设置轮播函数
        console.log(index);
        if (index < img.length - 1) {//判断当前页的长度，如果小于img图片的长度
            index++;  //自增至最后一张图片
            tow.style.marginLeft = -index * imgWidth + "px";
        } else { //不小于3变为0第一张
            index=0  //跳转至轮播初始位置
            tow.style.marginLeft = -index * imgWidth + "px";
        }
        console.log(index);
        // 修改小圆点颜色
        let span = five.children;
        for (let i = 0; i < span.length; i++) {//循环小圆点
            span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)"; //将其背景颜色变为白色
        }
        span[index].style.backgroundColor = "rgba(0, 0, 255, 0.6)";//图片轮播到第几张时把对应的小圆点变为蓝色
    }

    //鼠标移入
    banner.onmouseover = function() {
        clearInterval(times); //清除定时器
    }

    // 鼠标移出
    banner.onmouseout = function() {
        times = setInterval(scrolls, 2000);//开启定时器
        butItem[0].onclick = function() {//按钮绑定点击事件
            if (index > 0) {
                index--;
            } else if(index==0) {

                index = img.length - 1; //随后一张图片
            }
            tow.style.marginLeft = -index * imgWidth + "px";
            for (let i = 0; i < span.length; i++) {
                span[i].style.backgroundColor = "rgba(255, 255, 255, 0.6)";
            }
            span[index].style.backgroundColor = 'rgba(0, 0, 255, 0.6)';//同上
        }
    }
    butItem[1].onclick = scrolls; //向右点击调用轮播函数
</script>
</body>
</html>

具体的轮播可以根据需求进行调整；希望可以帮到大家；