百度小程式如何實現jQuery輪播效果

1

<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();

        });

2

 //點選左按鈕

        $(".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"));

            });

3

 //圖片向右走，與向左的原理相同

            $(".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>

4

最後，附上css樣式與html樣式。