html 简单的横幅旋转器与jQuery

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 简单的横幅旋转器与jQuery相关的知识，希望对你有一定的参考价值。

function rotateBanners(elem) {
  var active = $(elem+" img.active");
  var next = active.next();
  if (next.length == 0) 
    next = $(elem+" img:first");
  active.removeClass("active").fadeOut(200);
  next.addClass("active").fadeIn(200);
}

function prepareRotator(elem) {
  $(elem+" img").fadeOut(0);
  $(elem+" img:first").fadeIn(0).addClass("active");
}

function startRotator(elem) {
  prepareRotator(elem);
  setInterval("rotateBanners('"+elem+"')", 2500);
}

#rotator img { position: absolute; }

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <link href="rotate.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="rotate.js"></script>
    <script type="text/javascript">
      $(window).load(function() {
        startRotator("#rotator");
      })
    </script>
  </head>
<body>
  <div id="rotator">
    <img height="54" src="http://profill.biz.pl/images/klienci/1.jpg" width="150" />
    <img height="55" src="http://profill.biz.pl/images/klienci/2.jpg" width="168" />
    <img height="69" src="http://profill.biz.pl/images/klienci/3.jpg" width="138" />
    <img height="52" src="http://profill.biz.pl/images/klienci/4.jpg" width="158" />
    <img height="114" src="http://profill.biz.pl/images/klienci/5.jpg" width="117" />
    <img height="46" src="http://profill.biz.pl/images/klienci/6.jpg" width="190" />
    <img height="58" src="http://profill.biz.pl/images/klienci/7.jpg" width="177" />
    <img height="79" src="http://profill.biz.pl/images/klienci/8.jpg" width="174" />
    <img height="53" src="http://profill.biz.pl/images/klienci/10.jpg" width="161" />
    <img height="85" src="http://profill.biz.pl/images/klienci/11.jpg" width="128" />
    <img height="46" src="http://profill.biz.pl/images/klienci/12.jpg" width="140" />
    <img height="77" src="http://profill.biz.pl/images/klienci/13.jpg" width="139" />
    <img height="49" src="http://profill.biz.pl/images/klienci/14.jpg" width="152" />
    <img height="53" src="http://profill.biz.pl/images/klienci/15.jpg" width="137" />
    <img height="47" src="http://profill.biz.pl/images/klienci/16.jpg" width="150" />
    <img height="40" src="http://profill.biz.pl/images/klienci/17.jpg" width="153" />
    <img height="144" src="http://profill.biz.pl/images/klienci/18.jpg" width="149" />
    <img height="56" src="http://profill.biz.pl/images/klienci/19.jpg" width="170" />
    <img height="81" src="http://profill.biz.pl/images/klienci/20.jpg" width="161" />
  </div>
</body>
</html>

以上是关于html 简单的横幅旋转器与jQuery的主要内容，如果未能解决你的问题，请参考以下文章