0

在我的网站主页上，我希望加入一个旋转横幅。

我有一组图像 (4)，目前每 5 秒更改一次。

但是，我真正想要的是开发类似于 Oracle 所做的东西 - http://www.oracle.com/index.html

您可以看到他们的横幅由 3 部分组成：

1）中间的主图。2) 标题 - 为每个图像显示一个图标。3) 默认情况下隐藏的页脚，但在选择时向上滑动。

关于我如何开始的任何想法？我正在使用 HTML 和 jQuery。

谢谢

29-05-13 更新

抱歉忘记上传我当前的代码：

HTML：

    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; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="main.js"></script>
         <script type="text/javascript">
            $(window).load(function() {
            startRotator("#rotator");
            })
         </script>
      </head>
       <div id="rotator">
            <img src="https://dummyimage.com/600x400/000000/fff&text=1" />
            <img src="https://dummyimage.com/600x400/000000/fff&text=2" />
            <img src="https://dummyimage.com/600x400/000000/fff&text=3" />
            <img src="https://dummyimage.com/600x400/000000/fff&text=4" />
       </div>

4

0 回答 0