旋转图像和文本

Question

我希望在我的网站上每隔几秒钟旋转一张图像及其相应的文本块。就像这些人 http://hellofisher.com/

我知道我可以使用 javascript 来旋转图像，但我还没有找不到可以让文本块同时旋转以适应图像的地方。

Answer 1

只需谷歌搜索 jquery 内容旋转器或内容滑块即可。有一百万个现成的插件已经这样做了：

例如

Answer 2

我将向您展示一个简单的示例，您可以轻松地在您的网站上使用它。此示例使用 3 张幻灯片，并不是动态滑块，您可以拥有任意数量的幻灯片，但如果幻灯片数量可以变化，则可以轻松将其编辑为一张幻灯片。

HTML：

<div id="slider">
    <div id="slider-area">
        <div class="slide">content</div>
        <div class="slide">content</div>
        <div class="slide">content</div>
    </div>
</div>

滑块是用户可以看到的可见区域，滑块区域是放置幻灯片的区域，每张幻灯片包含不同的图像和文本。

CSS：

#slider {
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

#slider-area {
    width: 1200px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
}

.slide {
    width: 400px;
    float: left;
}

如您所见，滑块区域的宽度是滑块大小的 3 倍，因为有 3 张幻灯片。滑块有overflow:hidden，这意味着滚动条不可见，还有position:relative，这样我们就可以绝对地将滑块区域定位在滑块内。然后我们只需将幻灯片插入滑块区域即可。

JS（使用 JQuery）：

$(document).ready(function() {
    var timer = setInterval(changeSlide, 5000);
});

function changeSlide() {
    var pos = $('#slider').attr('scrollLeft');
    if (pos==800)
        pos=0
    else
        pos=pos+400;
    $('#slider').animate({scrollLeft: pos}, 600, 'swing');
}

在这里您设置一个计时器，它将每 5 秒调用一次changeSlide 函数。 ChangeSlide 函数将获取滑块滚动条的当前位置并相应地设置动画。如果显示最后一张幻灯片，下一张将是第一张幻灯片 (pos=0)，如果不显示最后一张幻灯片，则会在位置上添加 400，以便滚动到下一张幻灯片。基本上，滑动动画只是用计时器移动隐藏的滚动条。

希望这有帮助！

Answer 3

只需使用 jQuery 旋转出包含图像和关联文本的

即可。使用 $.hide() 和 $.show() 以及 Javascript 的时间函数。

Answer 4

您可以尝试：

JAVASCRIPT

var imagelist = ["IMAGE1","IMAGE2","IMAGE3"]
var textlist = ["TEXT1","TEXT2","TEXT3"];
counter=0;
countmax=3;
var next = function(){
    $('rotating_image').innerHTML="<img src=\"" imagelist[counter%countmax] + "\">";
    $('rotating_text').innerHTML=textlist[counter%countmax];
    countmax++;
}
var rotate = window.setInterval(next, SECONDS * 1000);

HTML

<span id="rotating_image"></span>
<span id="rotating_text"></span>