Question

我希望在我的网站上每隔几秒就有一个相应的文本块旋转图像。就像这些家伙http://hellofisher.com/

一样

我知道我可以使用javascript来旋转图像，但我没有找到可以旋转的文本块以适应图像的位置。

Answer 1

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

For example

Answer 2

只需使用jQuery旋出包含图像和相关文本的<div>即可。使用$.hide()和$.show()以及Javascript的时间函数。

Answer 3

你可以尝试：

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>

Answer 4

我将向您展示一个可以在您的网站上轻松使用的简单示例。此示例使用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个幻灯片。滑块有溢出：隐藏，这意味着滚动条将不可见，位置：相对，因此我们可以绝对定位滑块内的滑块区域。然后我们只需在滑块区域内插入幻灯片。

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，以便滚动到下一张幻灯片。基本上，滑动动画只是使用计时器移动隐藏的滚动条。

希望这有帮助！

旋转图像和文本

4 个答案: