图片特效 - 第三方应用与工具

图片循环轮播滚动、图片跑马灯

图片循环滚动

图片1

图片2

图片3

图片4
图片5

图片6

图片7

图片8

点击右方“复制全部代码”按钮，然后将代码放在网站编辑器 > 应用商店及 HTML 代码的HTML里

Copy Code

        
         <!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>图片循环滚动</title>

    <style>
      #box div,
      box ul,
      box li {
        margin: 0;
        padding: 0;
        font-style: normal;
        font: 12px/22px "\5B8B\4F53", Arial, Helvetica, sans-serif;
      }

      #box ol,
      box ul,
      box li {
        list-style: none;
      }

      #box img {
        border: 0;
        vertical-align: middle;
      }

      #box .clear {
        clear: both;
        height: 1px;
        width: 100%;
        overflow: hidden;
        margin-top: -1px;
      }

      #box a {
        color: #000000;
        /* 该颜色是文字颜色 */
        text-decoration: none;
      }
      #box a:hover {
        color: #ba2636;
        /* 该颜色是鼠标悬浮颜色 */
        text-decoration: underline;
      }

      #box {
        width: 100%; /* 总宽度 */
        margin: 20px auto;
        padding: 2px;
        color: #000000;
        background: #fff;
        text-align: center;
      }

      #Marquee_x {
        overflow: hidden;
        width: 925px;
      }

      #Marquee_x ul li,
      #Marquee_x ul li div {
        float: left;
        line-height: 25px;
        overflow: hidden;
      }

      #Marquee_x ul li div {
        float: left;
        line-height: 25px;
        width: 142px;
        overflow: hidden;
      }

      #Marquee_x ul li div img {
        border: 1px solid #dadada;
        width: 140px;
        height: 230px;
        display: block;
      }

      #Marquee_x ul li div span {
        display: block;
        font-size: 12px;
        line-height: 16px;
      }
    </style>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>
      (function ($) {
        $.fn.jcMarquee = function (options) {
          var defaults = {
            marquee: "x",
            margin_bottom: "0",
            margin_right: "0",
            speed: "10",
          };

          var options = $.extend(defaults, options);

          return this.each(function () {
            var $marquee = $(this),
              $marquee_scroll = $marquee.children("ul");

            $marquee_scroll.append("<li class='clone'>" + "</li>");

            $marquee_scroll
              .find("li")
              .eq(0)
              .children()
              .clone()
              .appendTo(".clone");

            var $marquee_left = $marquee_scroll.find("li");

            if (options.marquee == "x") {
              var x = 0;

              $marquee_scroll.css("width", "1000%");

              $marquee_left
                .find("div")
                .css({ "margin-right": options.margin_right });

              $marquee_left.css({ "margin-right": options.margin_right });

              function Marquee_x() {
                $marquee.scrollLeft(++x);

                _margin = parseInt(
                  $marquee_left.find("div").css("margin-right")
                );

                if (x == $marquee_left.width() + _margin) {
                  x = 0;
                }
              }

              var MyMar = setInterval(Marquee_x, options.speed);

              $marquee.hover(
                function () {
                  clearInterval(MyMar);
                },
                function () {
                  MyMar = setInterval(Marquee_x, options.speed);
                }
              );
            }

            if (options.marquee == "y") {
              var y = 0;

              $marquee_scroll.css("height", "1000%");

              $marquee_left
                .find("div")
                .css("margin-bottom", options.margin_bottom);

              $marquee_left.css("margin-bottom", options.margin_bottom);

              function Marquee_y() {
                $marquee.scrollTop(++y);

                _margin = parseInt(
                  $marquee_left.find("div").css("margin-bottom")
                );

                if (y == $marquee_left.height() + _margin) {
                  y = 0;
                }
              }

              var MyMar = setInterval(Marquee_y, options.speed);

              $marquee.hover(
                function () {
                  clearInterval(MyMar);
                },
                function () {
                  MyMar = setInterval(Marquee_y, options.speed);
                }
              );
            }
          });
        };
      })(jQuery);

      $(function () {
        $("#Marquee_x").jcMarquee({
          marquee: "x",
          margin_right: "10px",
          speed: 20,
        });
        //10px代表间距,20代表滚动速度
      });
    </script>
  </head>

  <body>
    <div id="box">
      <div id="Marquee_x">
        <ul style="width: 1000%">
          <li style="margin-right: 10px">
            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FnQbj_Ldclxo0853wlCgxgXhTafl.jpg"
                /><span>图片1</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/Fhwp8fJVG0--4pEG9MWPYaGTtw0B.jpg"
                /><span>图片2</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FrnGe50eTE8QxHUumOaCGQMqz571.jpg"
                /><span>图片3</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FonL3o-SVxDI4ii-y6rOi609kSUj.jpg"
                /><span>图片4</span></a
              >
            </div>
          </li>

          <!--不加下面的标签就会卡顿 -->

          <li class="clone" style="margin-right: 10px">
            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.3.15ea397fwbW3VD&id=619159500532"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/Fk4-c3R2kbba_G4z7SF-MMGkw9RL.jpg"
                /><span>图片5</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.5.15ea397fwbW3VD&id=619161180900"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FsQRF6X4DEDDII04QFY45mbVDSI6.jpg"
                /><span>图片6</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.7.15ea397fwbW3VD&id=619718242434"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FtyG9loxwo82z96LsrrwBj4DHvwN.jpg"
                /><span>图片7</span></a
              >
            </div>

            <div style="margin-right: 10px">
              <a
                href="https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-22842087642.9.15ea397fwbW3VD&id=619726198924"
                target="_blank"
                ><img
                  src="https://user-assets.sxlcdn.com/images/29595/FpIZ9_7otSpe95fJobkbkHTR9VQO.jpg"
                /><span>图片8</span></a
              >
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

带文本的卡片翻转
把你的鼠标放在下方图片上

WWF

黑与白

保护自然

WWF

黑与白

保护自然

点击这里获取代码，将代码放在网站编辑器 > 应用商店及 HTML 代码的HTML里

图片循环轮播滚动、图片跑马灯

点击右方“复制全部代码”按钮，然后将代码放在网站编辑器 > 应用商店及 HTML 代码的HTML里

带文本的卡片翻转

把你的鼠标放在下方图片上

WWF

WWF