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的最后一行。并以我的风格修改。

＆＃13;

$(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(){

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以在textContent元素中移动textMessage元素，而不只是移动文本内容

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

不要使用动画制作更长的淡入淡出，只需给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>

横幅中的Javascript文本更改间隔 - 无需单击

4 个答案: