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

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

需要这些哦
jQuery
方式/
1<script src=https://vvvtt.com/article/"jquery-3.0.0.js">
  <script type="text/javascript">
      var timer;
      $(function() {
        //设置图片标的目的左移
        imgshow();
        //点击暂停按钮事务
        $(".pause").click(function () {
          clearInterval(timer);
        });
        //点击播放按钮事务
        $(".play").click(function () {
          imgshow();
        });

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

文章插图

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).appTo($(".ullist"));
            });
            //设置小框的图片轮播 , 道理与年夜框图片轮播一致
            $(".s_lilist:first").animate({
              "marginLeft": "-20%"
            }, 650, "linear", function () {
              $(this).css("marginLeft", "0px");

推荐阅读