jQuery学习之大轮播+小轮播

jQ代码：

在写jQuery代码之前一定要先导库，此处我用的是3.0的库

<script src="jquery-3.0.0.js"></script>

   <script type="text/javascript">
            var timer;
            $(function() {
                //设置图片向左移
                imgshow();
                //点击暂停按钮事件
                $(".pause").click(function () {
                    clearInterval(timer);
                });
                //点击播放按钮事件
                $(".play").click(function () {
                    imgshow();
                });
                //点击左按钮
                $(".prev").click(function () {
                    imganimation("left");
                });
                //点击右按钮
                $(".next").click(function () {
                    imganimation("right");
                });
                function imganimation(res) {
                    //图片向左走的轮播
                   if(res=="right"){
                       //animate()动画第一个li向左移动20%
                       $(".lilist:first").animate({
                           "marginLeft": "-20%"
                       }, 700, "linear", function () {
                           //这个li回到原来的位置
                           $(this).css("marginLeft", "0px");
                           //将它追加到ul的最后的位置
                           $(this).appendTo($(".ullist"));
                       });
                       //设置小框的图片轮播，原理与大框图片轮播一致
                       $(".s_lilist:first").animate({
                           "marginLeft": "-20%"
                       }, 650, "linear", function () {
                           $(this).css("marginLeft", "0px");
                           $(this).appendTo($(".s_ullist"));
                       });
                   }else {
                       //图片向右走，与向左的原理相同
                       $(".lilist:first").animate({
                           "marginLeft": "20%"
                       }, 700, "linear", function () {
                           $(this).css("marginLeft", "0px");
                           $(".lilist:last").prependTo($(".ullist"));
                       });
                       $(".s_lilist:first").animate({
                           "marginLeft": "20%"
                       }, 650, "linear", function () {
                           $(this).css("marginLeft", "0px");
                           $(".s_lilist:last").prependTo($(".s_ullist"));
                       });
                   };
                };
                //默认图片自动向左走
                function imgshow() {
                    timer = setInterval(function (){
                                imganimation("right");
                            } , 2000);
                };
            });
        </script>     

css样式：

             * {
                margin: 0;
                padding: 0;
            }

            .divbg {
                width: 100%;
                height: 350px;
                /*overflow: hidden;*/
                position: relative;
            }

            .mb {
                width: 30%;
                height: 350px;
                background: rgba(0, 0, 0, 0.3);
                position: absolute;
            }

            .mb:first-child {
                left: 0px;
            }

            .mb:nth-child(2) {
                right: 0px;
            }

            .ullist {
                width: 200%;
                height: 350px;
                margin-left: -50%;
            }

            .lilist {
                width: 20%;
                height: 350px;
                list-style: none;
                float: left;
            }

            .imglist {
                width: 100%;
                height: 100%;
            }
            .divblock{
                width: 20%;
                height: 70%;
                border: 4px solid rgba(255, 255, 255, 0.32);
                position: absolute;
                z-index: 5;
                left: 46%;
                top: 15%;
                overflow: hidden;
            }
            .s_mb{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                position: absolute;
                z-index: 10;
            }
            .s_ullist{
                width: 500%;
                height: 100%;
                margin-left: -200%;
            }
            .s_lilist{
                width: 20%;
                height: 100%;
                list-style: none;
                float: left;
            }
            .s_imglist{
                height: 100%;
                width: 100%;
            }
            .s_mb img{
                margin-left: 16%;
                margin-top: 65%;
                cursor: pointer;
            }

html样式：

<p class="pbg">
    <p class="pblock">
         <p class="s_mb">
             <img class="prev" src="./img2/btn_prev.png" />
             <img class="pause" src="./img2/btn_pause.png" />
             <img class="play" src="./img2/btn_play.png" />
             <img class="next" src="./img2/btn_next.png" />
         </p>
         <ul class="s_ullist">
             <li class="s_lilist">
                <img class="s_imglist" src="img2/2121.jpg" />
             </li>
             <li class="s_lilist">
                <img class="s_imglist" src="img2/2122.jpg" />
             </li>
             <li class="s_lilist">
                <img class="s_imglist" src="img2/2123.jpg" />
             </li>
             <li class="s_lilist">
                <img class="s_imglist" src="img2/2124.jpg" />
             </li>
             <li class="s_lilist">
                <img class="s_imglist" src="img2/2123.jpg" />
             </li>
         </ul>
    </p>
    <p class="mb"></p>
    <p class="mb"></p>
    <ul class="ullist">
        <li class="lilist">
            <img class="imglist" src="img2/2121.jpg" />
        </li>
        <li class="lilist">
            <img class="imglist" src="img2/2122.jpg" />
        </li>
        <li class="lilist">
            <img class="imglist" src="img2/2123.jpg" />
        </li>
        <li class="lilist">
            <img class="imglist" src="img2/2124.jpg" />
        </li>
        <li class="lilist">
            <img class="imglist" src="img2/2123.jpg" />
        </li>
    </ul>
</p>