热修复滑块的背景颜色问题？答案

【问题标题】：Hot to fix problem with backgound color for slider?热修复滑块的背景颜色问题？
【发布时间】：2022-01-09 01:49:10
【问题描述】：

我为文本使用了一个简单的滑块，但我无法使背景变黑。怎么做？我对文本使用了一个简单的滑块，但我不能使背景变黑。怎么做？

var text_slide_cur=0;
function showtext_slide(){
    $('#text_slide'+(text_slide_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "0px"}, 1000);
    setTimeout(hidetext_slide, 1000);
}
function hidetext_slide(){
    $('#text_slide'+(text_slide_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-0px"}, 1000,function(){showtext_slide();});
    text_slide_cur=(text_slide_cur+1)%5;
}
 $(window).on('load', function() {
    showtext_slide();
})

ul#textSlider li {
    position: absolute;
    left: 0px;
    opacity:0;
    color:red;

}

div {
  background-color: black; 
  display: block;
      position: relative;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div>

<ul id='textSlider' style=' margin:0px; padding:0px;'>
<li id="text_slide1">Block №1</li>
<li id="text_slide2">Block №2</li>
<li id="text_slide3">Block №3</li>
<li id="text_slide4">Block №4</li>
<li id="text_slide5">Block №5</li>
</ul>

</div>

【问题讨论】：

当你给一个元素 absolute 位置时，父元素不会扩展，你的 div 认为它里面没有子元素，你必须给 div 一个固定的宽度和高度

标签： jquery css slider

【解决方案1】：

问题是 li 元素是绝对定位的。这意味着它们不会为 ul 元素贡献任何维度，因此对封闭的 div 元素也没有任何贡献。

你可以把背景放在每个里：

var text_slide_cur = 0;

function showtext_slide() {
  $('#text_slide' + (text_slide_cur + 1)).css({
    opacity: 0
  }).animate({
    opacity: 1.0,
    left: "0px"
  }, 1000);
  setTimeout(hidetext_slide, 1000);
}

function hidetext_slide() {
  $('#text_slide' + (text_slide_cur + 1)).css({
    opacity: 1
  }).animate({
    opacity: 0,
    left: "-0px"
  }, 1000, function() {
    showtext_slide();
  });
  text_slide_cur = (text_slide_cur + 1) % 5;
}
$(window).on('load', function() {
  showtext_slide();
})

ul#textSlider li {
  position: absolute;
  left: 0px;
  opacity: 0;
  color: red;
  background-color: black;
}

div {
  background-color: black;
  display: block;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div>

  <ul id='textSlider' style=' margin:0px; padding:0px;'>
    <li id="text_slide1">Block №1</li>
    <li id="text_slide2">Block №2</li>
    <li id="text_slide3">Block №3</li>
    <li id="text_slide4">Block №4</li>
    <li id="text_slide5">Block №5</li>
  </ul>

</div>

【讨论】：