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

를 추가 : 여기

내가 가진 무엇자바 스크립트의 마지막 줄에. 내 스타일로 수정하십시오.

$(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 요소를 이동할 수 있습니다 페이드가 길어지면, 그냥주세요.번호. 다른 기능으로 slide을 감쌀 필요는 없습니다. 이미 맞습니다. });이 없기 때문에 $(window).load(function(){ ... 비트가 출력되었지만 스 니펫에는 필요하지 않습니다. 당신은 여전히 ​​당신의 코드에서 그것을 필요로 할 것입니다. 텍스트를 쓰려면 html을 사용하고 texts에 넣으려면 text을 사용하고 있습니다.

많은 양의 스팸을 생성하는 사회적 실험 인 경우 좋은 메모입니다.)

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>