(1)html布局：
? ? <div id="rotation">
? ? ? ? <ul>?
? ? ? ? ? ? <li><img src="imgs/6.png"></li>
? ? ? ? ? ? <li><img src="imgs/1.png"></li>
? ? ? ? ? ? <li><img src="imgs/2.png"></li>
? ? ? ? ? ? <li><img src="imgs/3.png"></li>
? ? ? ? ? ? <li><img src="imgs/4.png"></li>
? ? ? ? ? ? <li><img src="imgs/5.png"></li>
? ? ? ? ? ? <li><img src="imgs/6.png"></li>
? ? ? ? ? ? <li><img src="imgs/1.png"></li>
? ? ?</ul>
? ? ? <ol>
? ? ? ? ? ? <li>1</li>
? ? ? ? ? ? <li>2</li>
? ? ? ? ? ? <li>3</li>
? ? ? ? ? ? <li>4</li>
? ? ? ? ? ? <li>5</li>
? ? ? ? ? ? <li>6</li>
? ? ? </ol>
? ? ? <button id="rotate_left">></button>
? ? ? ?<button id="rotate_right"><</button>
? ? </div>
（2）css：
#rotation {?
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? color: white;
? ? ? ? ? ? position: relative;//父元素相对定位，
? ? ? ? ? ? margin: 0 auto;
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? height: 600px;
? ? ? ? }
#rotation>ul {
? ? ? ? ? ? width: 4800px;?
? ? ? ? ? ? position: absolute;//子元素绝对定位
? ? ? ? ? ? left: -600px;
? ? ? ? }
??#rotation>ul>li {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? float: left;
? ? ? ? }
? ?#rotation>ol {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 70%;
? ? ? ? ? ? left: 40%;
? ? ? ? }
?#rotation>ol>li {
? ? ? ? ? ? margin-left: 5px;
? ? ? ? ? ? width: 25px;
? ? ? ? ? ? height: 25px;
? ? ? ? ? ? border-radius: 25px;
? ? ? ? ? ? line-height: 25px;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background-color: black;
? ? ? ? ? ? float: left;
? ? ? ? }
#rotation>button:nth-child(3) {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 30%;
? ? ? ? ? ? left: 94%;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: red;
? ? ? ? }
?#rotation>button:nth-child(4) {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 30%;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: red;
? ? ? ? }
（3js代码：
<script src="../../../lib/jquery-3.6.0.min.js"></script>
? ? <script>
? ? ? ? var rotate = $('#rotation');
? ? ? ? var ul = $('#rotation>ul');
? ? ? ? var oli = $('#rotation>ol>li');
? ? ? ? var rotate_right = $('#rotation>#rotate_right');
? ? ? ? var rotate_left = $('#rotation>#rotate_left');
? ? ? ? var index = 0;//负责下面的小li
? ? ? ? var n = 1;//次数，默认是1开头，因为ul的left值是-600px
? ? ? ? oli.eq(0).css('background-color', 'red').siblings().css('background-color', '');//初始第一个li颜色
? ? ? ? rotate_left.on('click', function () {
? ? ? ? ? ? index++;
? ? ? ? ? ? if (index >= 6) {//判断小圆点
? ? ? ? ? ? ? ? index = 0;
? ? ? ? ? ? }
? ? ? ? ? ? oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');
? ? ? ? ? ? n++;
? ? ? ? ? ? if (n == 8) {//点击次数，因为前后加了一张最后的图片和第一张图片，不熟悉可以边点击边
? ? ? ? ? ? ? ? n = 2;
? ? ? ? ? ? ? ? ul.css('left', -600);//回到开头
? ? ? ? ? ? }
? ? ? ? ? ? ul.stop().animate({
? ? ? ? ? ? ? ? left: -600 * n,//做动画
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? rotate_right.on('click', function () {
? ? ? ? ? ? index--;
? ? ? ? ? ? if (index == -1) {
? ? ? ? ? ? ? ? index = 5;
? ? ? ? ? ? }
? ? ? ? ? ? oli.eq(index).css('background-color', 'red').siblings().css('background-color', '');
? ? ? ? ? ? n--;
? ? ? ? ? ? if (n == -1) {
? ? ? ? ? ? ? ? n = 5;
? ? ? ? ? ? ? ? ul.css('left', -600 * (n + 1));
? ? ? ? ? ? }
? ? ? ? ? ? ul.stop().animate({
? ? ? ? ? ? ? ? left: -600 * n,
? ? ? ? ? ? })
? ? ? ? })
? ? ? ? var timer = setInterval(function () {
? ? ? ? ? ? rotate_left.click();//点击事件放在定时器，每1秒自动点击一次，会自动轮播
? ? ? ? }, 1000)
? ? ? ? rotate.on({//进入和离开清除定时器和开启定时器
? ? ? ? ? ? mouseenter: function () {
? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? },
? ? ? ? ? ? mouseleave: function () {
? ? ? ? ? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? ? ? ? ? rotate_left.click();
? ? ? ? ? ? ? ? }, 1000)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? oli.on('mouseenter', function () {
? ? ? ? ? ? $(this).css('background-color', 'red').siblings().css('background-color', '');
? ? ? ? ? ? n = $(this).index() + 1;//下面小圆点移入显示对应图片，获取下标赋值给一个张图
? ? ? ? ? ? index = $(this).index();
? ? ? ? ? ? ul.stop().animate({
? ? ? ? ? ? ? ? left: -600 * n,
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
