【java奇思妙想】实现类似淘宝的轮播图，能够自动切换，鼠标移入自动停止-CFANZ编程社区

.html文件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="./css/planone.css">
    <!-- 引包，引入JQ -->
    <script src="./js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div>
        <ul>
            <li class="current"><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
        </ul>
        <button class="lbtn">&lt;</button>
        <button class="rbtn">&gt;</button>
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>

</html>
<script>
    //右侧按钮单击事件
    //信号量：全局变量（控制某一个li运动）
    var idx = 0;
    //右侧按钮的代码进行封装
    function rhandle() {
        //当前显示这张图片从left为0位置运动到-600
        $("ul li").eq(idx).css({
            "left": 0
        }).stop(true).animate({
            "left": -600
        }, 500);
        //全局变量累加1【下一张图要进入容器里面】
        idx++;
        idx = idx > 4 ? 0 : idx;
        //下一张图进入
        $("ul li").eq(idx).css({
            "left": 600
        }).stop(true).animate({
            "left": 0
        }, 500);
        //底下分页器也跟着变化
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
        //addClass代表给标签添加类名、removeClass代表给标签移出类名
    }
    $(".rbtn").click(rhandle);
    //开启定时器让轮播图自动轮播
    var timer = setInterval(rhandle, 1500);
    //鼠标移上事件
    $("div").mouseenter(function () {
        //清除定时器
        clearInterval(timer);
    });
    //鼠标离开事件
    $("div").mouseleave(function () {
        timer = setInterval(rhandle, 1500);
    });

    //左侧按钮的单击事件
    $(".lbtn").click(function () {
        //当前显示图片运动的动画
        $("ul li").eq(idx).css({
            "left": 0
        }).stop(true).animate({
            "left": 600
        }, 500);
        //全局变量需要累减
        idx--;
        idx = idx < 0 ? 4 : idx;
        //下一张图片动画
        $("ul li").eq(idx).css({
            "left": -600
        }).animate({
            "left": 0
        }, 500);
        //底下分页器也跟着变化
        $("ol li").eq(idx).addClass("cur").siblings().removeClass();
    });
    /*****************************************************************************************/
    //底下的分页器业务
    $("ol li").click(function () {
        //获取单击的那个分页器li索引值
        var index = $(this).index();
        //分两种情况讨论
        if (index > idx) {
            //当前显示这张图片动画
            $("ul li").eq(idx).css({
                "left": 0
            }).stop(true).animate({
                "left": -600
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left": 600
            }).stop(true).animate({
                "left": 0
            }, 500);
            //全局变量idx从新赋值
            idx = index;
            //底下分页器也跟着变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
            //addClass代表给标签添加类名、removeClass代表给标签移出类名
        } else {
            //当前显示这张图片动画
            $("ul li").eq(idx).css({
                "left": 0
            }).stop(true).animate({
                "left": -600
            }, 500);
            //单击那个分页器对应的图片动画
            $("ul li").eq(index).css({
                "left": 600
            }).stop(true).animate({
                "left": 0
            }, 500);
            //全局变量idx从新赋值
            idx = index;
            //底下分页器也跟着变化
            $("ol li").eq(idx).addClass("cur").siblings().removeClass();
            //addClass代表给标签添加类名、removeClass代表给标签移出类名
        }

    })
</script>

.css文件

*{
	margin: 0;
	padding: 0;
}

div{
	position: relative;
	width: 600px;
	height: 400px;
	border: 1px solid black;
	margin: 50px auto;
	overflow: hidden;
}

ul{
	position: absolute;
	width: 600px;
	height: 400px;
	list-style: none;
}

img{
	width: 600px;
	height: 400px;
}

ul li{
	position: absolute;
	width: 600px;
	height: 400;
	left: 600px;
}

.current{
	left: 0px;
}

.lbtn{
	position: absolute;
	width: 35px;
	height: 35px;
	left: 0px;
	top: 40%;
}
.rbtn{
	position: absolute;
	width: 35px;
	height: 35px;
	right: 0px;
	top: 40%;
}

ol{
	position: absolute;
	width: 150px;
	height: 25px;
	left: 38%;
	bottom: 5px;
	list-style: none;
}
ol li{
	float: left;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #000000;
	color: white;
	text-align: center;
	line-height: 25px;
	margin-right: 3px;
}

.cur{
	background-color: darkturquoise;
	transform: scale(1.2);
}