【无标题】

最新推荐文章于 2024-10-04 20:18:28 发布

一念永恒@

最新推荐文章于 2024-10-04 20:18:28 发布

阅读量83

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_48435896/article/details/124918063

版权

位移轮播jquery

body部分：
在这里插入图片描述

jquery部分：
在这里插入图片描述

在这里插入图片描述

css部分：
* {margin: 0;
padding: 0;}

		ul {list-style: none;}

		a {text-decoration: none;}

		.box {position: relative;width: 400px;height: 400px;
			
			margin: 0 auto;
			overflow: hidden;
		}

		.box .pics {
			position: absolute;
			left: 0;
			top: 0;
			display: flex;

			/* overflow: hidden; */
		}

		.box .pics li {
			display: 1;
			width: 400px;
			height: 400px;
		}

		.box ul li img {
			width: 400px;
			height: 400px;
		}

		.box>a {
			position: absolute;
			width: 30px;
			height: 30px;
			top: 39%;
			/* left: ; */
			font-size: 30px;
			color: blanchedalmond;
			line-height: 30px;
			margin: 0 auto;
			background-color: rgba(0, 0, 0, 0.3);
		}

		.box .prev {
			left: 0;

		}

		.box .next {
			right: 0;
		}

		.box .dots {
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
		}

		.box .dots span {
			/* position: absolute; */
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: beige;
			cursor: pointer;
			margin: 0 2px;

		}

		.box .dots span.on {
			background-color: red;
		}