旋转轮播图

最近觉得手生，看到优酷官网的轮播图，所以决定写个旋转轮播图效果。
与之前自己写的轮播图最大不同的是：
之前我做轮播图有两种方式

• 通过设置ul和li，把li排成一行，计算宽度，达到轮播图左右切换的效果
• 把li摞在一起，设置渐变隐藏或者显示，类似慕课网官网效果
  旋转轮播图实现的原理又给我提供了一种新的思路，通过在切换中改变标签的内容和位置来达到切换效果
  实例代码：
  html

<div class="tuul">
    <!--左右-->
    <div class="button-two">
        <span class="left"></span>
        <span class="right"></span>
    </div>
    <!--图片-->
    <ul class="bg">
        <li class="no0"><img src="优酷轮播图image/image1.jpg" height="410" width="970"/></li>
        <li class="no1"><img src="优酷轮播图image/image2.jpg" height="410" width="970"/></li>
        <li class="no2"><img src="优酷轮播图image/image3.jpg" height="410" width="970"/></li>
        <li class="no3"><img src="优酷轮播图image/image4.jpg" height="410" width="970"/></li>
        <li class="no4"><img src="优酷轮播图image/image5.jpg" height="410" width="970"/></li>
        <li class="waiting"><img src="优酷轮播图image/image6.jpg" height="410" width="970"/></li>
        <li class="waiting"><img src="优酷轮播图image/image7.jpg" height="410" width="970"/></li>
        <li class="waiting"><img src="优酷轮播图image/image8.jpg" height="410" width="970"/></li>
        <li class="waiting"><img src="优酷轮播图image/iamge9.jpg" height="410" width="970"/></li>
    </ul>
    <!--按钮-->
    <div class="button">
        <ul>
            <li></li>
            <li></li>
            <li class="cur"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

css

*{
            padding: 0;
            margin: 0;
        }
        .tuul{
            width: 1189px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .bg{
            list-style: none;
        }
        .bg li{
            position: absolute;
            background-color: #000;
        }
        .bg li img{
            width: 100%;
            height: 100%;
        }
        .waiting{
            display: none;
        }
        .bg li.no0{
            width: 174px;height:122px;left:-116px;top:100px;z-index: 777;
        }
        .bg li.no1{
            width: 356px;height:223px;left:0px;top:26px;z-index: 888;
        }
        .bg li.no2{
            width: 642px;height:273px;left:274px;top:0px;z-index: 999;
        }
        .bg li.no3{
            width: 356px;height:223px;left:834px;top:26px;z-index: 888;
        }
        .bg li.no4{
            width: 174px;height:122px;left:1097px;top:100px;z-index: 777;
        }
        .bg li.no1 img , .bg li.no3 img{
            opacity: 0.3;
        }
        /*按钮部分*/
        .button{
            width: 600px;
            height: 20px;
            position: absolute;
            top: 312px;
            left: 454px;
        }
        .button ul{
            list-style: none;
        }
        .button li{
            float: left;
            width: 16px;
            height: 16px;
            background-color: blue;
            margin-right: 10px;
            border-radius: 100px;
            cursor: pointer;
        }
        .button li.cur{
            background-color:red;
        }

javascript

*{
            padding: 0;
            margin: 0;
        }
        .tuul{
            width: 1189px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .bg{
            list-style: none;
        }
        .bg li{
            position: absolute;
            background-color: #000;
        }
        .bg li img{
            width: 100%;
            height: 100%;
        }
        .waiting{
            display: none;
        }
        .bg li.no0{
            width: 174px;height:122px;left:-116px;top:100px;z-index: 777;
        }
        .bg li.no1{
            width: 356px;height:223px;left:0px;top:26px;z-index: 888;
        }
        .bg li.no2{
            width: 642px;height:273px;left:274px;top:0px;z-index: 999;
        }
        .bg li.no3{
            width: 356px;height:223px;left:834px;top:26px;z-index: 888;
        }
        .bg li.no4{
            width: 174px;height:122px;left:1097px;top:100px;z-index: 777;
        }
        .bg li.no1 img , .bg li.no3 img{
            opacity: 0.3;
        }
        /*按钮部分*/
        .button{
            width: 600px;
            height: 20px;
            position: absolute;
            top: 312px;
            left: 454px;
        }
        .button ul{
            list-style: none;
        }
        .button li{
            float: left;
            width: 16px;
            height: 16px;
            background-color: blue;
            margin-right: 10px;
            border-radius: 100px;
            cursor: pointer;
        }
        .button li.cur{
            background-color:red;
        }