試圖修復我的bug

Question

即時從右向左製作幻燈片文本，但是當左側停止移動並重新開始...我希望它永遠不會停止從右向左移動..這是我的代碼。

function change_left() { 
$('#slide12').removeClass('slide-right').addClass('slide-left'); 
} 

function change_right() { 
$('#slide12').removeClass('slide-left').addClass('slide-right'); 

} 

function to_left() { 
setInterval(change_left, 5000); 

}; 

function to_right() { 
setInterval(change_right, 5000); 
}; 
to_left(); 
to_right() 

Answer 1

你可以用css來做到這一點。

HTML

<div class="display"> 
<div class="moving-text"> 
Moving... 
</div> 
</div> 

CSS

.display{ 
    width:100%; 
    height:100px; 
    background:#000000; 
    position:relative; 
    overflow:hidden; 
} 
.display .moving-text{ 
    display:inline-block; 
    font-size:40px; 
    padding:25px; 
    color:green; 
    position:absolute; 
    -webkit-animation: leftright 5s infinite; /* Safari 4.0 - 8.0 */ 
    animation: leftright 5s infinite; 
} 

@keyframes leftright { 
    0% {left: 0;} 
    100% {left: 100%;} 
} 

@keyframes rightleft { 
    0% {left: 100%;} 
    100% {left: 0;} 
} 

@keyframes both { 
    0% {left: 0;} 
    49% {left: 100%;} 
    100% {left: 0;} 
} 

您可以更改動畫：左右改變 5S無限;與 '從右到左' 或 '兩者'

這是的jsfiddle here

Answer 2

您可以使用CSS。不需要jquery。

body { margin: 20px; } 
 

 
.marquee { 
 
    height: 25px; 
 
    width: 420px; 
 

 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.marquee div { 
 
    display: block; 
 
    width: 200%; 
 
    height: 30px; 
 

 
    position: absolute; 
 
    overflow: hidden; 
 

 
    animation: marquee 5s linear infinite; 
 
} 
 

 
.marquee span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
@keyframes marquee { 
 
    0% { left: 0; } 
 
    100% { left: -100%; } 
 
}

<div class="marquee"> 
 
    <div> 
 
    <span>You spin me right round, baby. Like a record, baby.</span> 
 
    <span>You spin me right round, baby. Like a record, baby.</span> 
 
    </div> 
 
</div>