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

效果图:

具体代码:

复制代码
<!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>

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

相关推荐
kooboo china.7 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
天涯学馆10 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
newxtc20 分钟前
【JJ斗地主-注册安全分析报告】
开发语言·javascript·人工智能·安全
烛阴1 小时前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
汪子熙2 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪2 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九2 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
秋田君3 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~3 小时前
React中子传父组件通信操作指南
前端·javascript·react.js