JavaScript文本更改橫幅間隔 - 無點擊

Question

我正在嘗試設置一個旋轉的文本橫幅。橫幅是使用內聯樣式創建的。但是，我的腳本似乎超出了我的內聯樣式。

以下是我有：

$(window).load(function(){ 
 
var cnt=0, texts=[]; 
 

 
// save the texts in an array for re-use 
 
$(".textContent").each(function() { 
 
    texts[cnt++]=$(this).text(); 
 
}); 
 
function slide() { 
 
    if (cnt>=texts.length) cnt=0; 
 
    $('#textMessage').html(texts[cnt++]); 
 
    $('#textMessage') 
 
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
 
    function() { 
 
     return slide() 
 
    } 
 
);  
 
}  
 
slide()    

div.textContent { display:none;}

<div id="textMessage"></div> 
 
<div class="textContent"><h2 style="padding:6px !important; background-color:#003768 !important; color:#8DC63F !important; font-size:27px !important;"><em> 
 
    Outsourcing ATMs - the smarter solution.</em> 
 
</h2></div> 
 
<div class="textContent"><h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Who spends ALL DAY on ATM Management? <span style="color:white";>Outsource ATM</span></em> 
 
</h2></div> 
 
<div class="textContent"><h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Quality service companies anticipate the needs of their clients by providing solutions - not more work.</em> 
 
</h2> 
 
</div>

Answer 1

變化text()到html()

https://jsfiddle.net/4aj7kg2q/

$(".textContent").each(function() { 
    texts[cnt++]=$(this).html();// html if you want to keep styles 
}); 

Answer 2

添加});到javascript的最後一行。 並修改我的風格。

$(window).load(function(){ 
 

 
var cnt=0, texts=[]; 
 

 
// save the texts in an array for re-use 
 
$(".textContent").each(function() { 
 
    texts[cnt++]=$(this).text(); 
 
}); 
 
function slide() { 
 
    if (cnt>=texts.length) cnt=0; 
 
    $('#textMessage > div').html(texts[cnt++]); // add div in #textMessage 
 
    $('#textMessage > div') 
 
    .fadeIn('slow').animate({opacity: 1.0}, 5000).fadeOut('slow', 
 
    function() { 
 
     return slide() 
 
    } 
 
);  
 
}  
 
slide() 
 

 
}); /// add last line close .load(function(){

.textContent { 
 
    display:none; 
 
} 
 

 
#textMessage { 
 
    color:#fff; 
 
    background: #0077CC; 
 
    border-radius: 10px; 
 
    padding:20px 20px; 
 
    box-shadow: 0 0 4px #ccc; 
 
    border: 1px solid #0363A8; 
 
    height:80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhai" rel="stylesheet"> 
 
<div id="textMessage"><div></div></div> 
 
<div class="textContent"><h2 style="padding:6px !important; background-color:#003768 !important; color:#8DC63F !important; font-size:27px !important;"><em> 
 
    Outsourcing ATMs - the smarter solution.</em> 
 
</h2></div> 
 
<div class="textContent"><h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Who spends ALL DAY on ATM Management? <span style="color:white";>Outsource ATM</span></em> 
 
</h2></div> 
 
<div class="textContent"><h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Quality service companies anticipate the needs of their clients by providing solutions - not more work.</em> 
 
</h2> 
 
</div>

Answer 3

您可以移動而不是僅僅移動文本內容

$(window).load(function() { 
 
    var cnt = 0, 
 
    $texts = $('.textContent'); 
 

 

 
    function slide() { 
 
    if (cnt >= $texts.length) cnt = 0; 
 
    $('#textMessage').html($texts.get(cnt++)); 
 
    $('#textMessage') 
 
     .fadeIn('slow').animate({ 
 
     opacity: 1.0 
 
     }, 1000).fadeOut('slow', 
 
     function() { 
 
      return slide() 
 
     } 
 
    ); 
 
    } 
 
    slide() 
 
});

div.textContent { 
 
    display: none; 
 
} 
 
#textMessage div.textContent { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="textMessage"></div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px !important; background-color:#003768 !important; color:#8DC63F !important; font-size:27px !important;"><em> 
 
    Outsourcing ATMs - the smarter solution.</em> 
 
</h2> 
 
</div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Who spends ALL DAY on ATM Management? <span style="color:white";>Outsource ATM</span></em> 
 
</h2> 
 
</div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Quality service companies anticipate the needs of their clients by providing solutions - not more work.</em> 
 
</h2> 
 
</div>

Answer 4

而不是使用動畫製作的textMessage元素中的textContent元素較長的褪色，只需給予fadeIn一個號碼。你不需要在另一個功能中包裝slide，它已經適合。 我離開$(window).load(function(){ ...位，因爲它缺少});，但片段不需要。你很可能仍然需要你的代碼。您使用html來編寫文本，但使用text將其存儲到texts。

作爲一個方面說明，如果這是一個社會實驗，產生大量的垃圾郵件，好的工作。 ）

var cnt = 0, 
 
    texts = []; 
 

 
// save the texts in an array for re-use 
 
$(".textContent").each(function() { 
 
    texts[cnt++] = $(this).html(); 
 
}); 
 

 
function slide() { 
 
    if (cnt >= texts.length) cnt = 0; 
 
    $('#textMessage').html(texts[cnt++]); 
 
    $('#textMessage') 
 
    .fadeIn(5000) 
 
    .fadeOut('slow', slide); 
 
} 
 
slide();

div.textContent { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="textMessage"></div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px !important; background-color:#003768 !important; color:#8DC63F !important; font-size:27px !important;"><em> 
 
    Outsourcing ATMs - the smarter solution.</em> 
 
</h2> 
 
</div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Who spends ALL DAY on ATM Management? <span style="color:white";>Outsource ATM</span></em> 
 
</h2> 
 
</div> 
 
<div class="textContent"> 
 
    <h2 style="padding:6px; background-color:#003768; color:#8DC63F; font-size:27px;"><em> 
 
    Quality service companies anticipate the needs of their clients by providing solutions - not more work.</em> 
 
</h2> 
 
</div>