当前位置:网站首页 > 创业 > 正文

百度小程序如何实现jQuery轮播效果

0 张子豪 张子豪 2025-10-11 19:26 1

相信列位初学写小法式的新手们,都需要一些案例来仿照进修。今天给大师供给一个轮播结果的实现方式,供大师参考。

东西/原料

  • jQuery

方式/步调

  1. 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. 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. 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. 4

    最后,附上css样式与html样式。

注重事项

  • 代码仅供参考,接待大师一路交流进修。

来源:百闻(微信/QQ号:9397569),转载请保留出处和链接!


本文链接:https://www.ibaiwen.com/web/229254.html

张子豪

张子豪

TA很懒,啥都没写...

@百闻娱乐 本站部分内容转自互联网,若有侵权等问题请及时与本站联系,我们将在第一时间删除处理。 | 粤ICP备2024343649号 | (地图