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。不需要jquery。

＆＃13;

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%; }
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用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;}
}

你可以改变动画： leftright 5s无限;与＆＃39; rightleft＆＃39;或者＆＃39;两个＆＃39;

这是JsFiddle here

试图修复我的错误

2 个答案: