旋轉的圖像和文字

Question

我想有一個圖像與它的相應的文本塊在我的網站上每隔幾秒鐘旋轉。就像這些人http://hellofisher.com/

我知道我可以得到一個JavaScript來旋轉圖像，但我還沒有找到我可以在哪裏旋轉以適應圖像的文本塊。

Answer 1

我會告訴你一個簡單的例子，您可以輕鬆地在您的網站上使用。本示例使用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'); 
} 

在這裏你設置一個計時器，它會調用changeSlide功能每5秒。 changeSlide函數將獲取滑塊滾動條的當前位置並相應地對其進行動畫處理。如果它顯示最後一張幻燈片，則下一張幻燈片（pos = 0），如果它沒有顯示最後一張幻燈片，則會向該位置添加400，以便它滾動到下一張幻燈片。基本上滑動動畫只是用一個定時器移動一個隱藏的滾動條。

希望有幫助！

Answer 2

只需使用jQuery旋出包含圖像和相關文本的<div>即可。使用$.hide()和$.show()和Javascript的時間函數。

Answer 3

只是谷歌的jQuery內容旋轉器或內容滑塊。有已經完成像這樣的百萬現成的插件：

For example

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>