JavaScript图像标题计时器HTML

我希望能够使我的图像标题移动到下一个图像几秒钟后。我试过几件事，但都不管用。我相信我可以使用JavaScript来做到这一点

任何帮助都将不胜感激

我会把代码挂起来：

<div id = "imageBanner">
   <div id="slideshow-wrap">
        <input type="radio" id="button-1" name="controls"     checked="checked"/>
        <label for="button-1"></label>
        <input type="radio" id="button-2" name="controls"/>
        <label for="button-2"></label>
        <input type="radio" id="button-3" name="controls"/>
        <label for="button-3"></label>
        <input type="radio" id="button-4" name="controls"/>
        <label for="button-4"></label>
        <input type="radio" id="button-5" name="controls"/>
        <label for="button-5"></label>
        <label for="button-1" class="arrows" id="arrow-1">></label>
        <label for="button-2" class="arrows" id="arrow-2">></label>
        <label for="button-3" class="arrows" id="arrow-3">></label>
        <label for="button-4" class="arrows" id="arrow-4">></label>
        <label for="button-5" class="arrows" id="arrow-5">></label>
        <div id="slideshow-inner">
            <ul id = "slideshow">
                <li><img style="width:100%;" src="battlefield4.png" /></li>
                <li><img style="width:100%;" src="fifa12.png" /></li>
                <li><img style="width:100%;" src="spiderman.png" /></li>
                <li><img style="width:100%;" src="mario.png" /></li>
                <li><img style="width:100%;" src="wiifit.png" /></li>
            </ul>
        </div>
   </div>
</div>      

>
>
>
>
>

一个淡入淡出图像的简单功能。我建议使用

position:absolute在li元素上，使它们彼此重叠

<script>
$(function(){
    $('#slideshow li:gt(0)').hide();
    setInterval(function(){
      $('#slideshow :first-child').fadeOut()
         .next('li').fadeIn()
         .end().appendTo('#slideshow');}, 
  6000);
});
</script>


$（函数（）{
$（“#幻灯片放映li:gt（0）”.hide（）；
setInterval（函数（）{
$（“#幻灯片放映：第一个孩子”）.fadeOut（）
.next（'li'）.fadeIn（）
.end（）.appendTo（“#幻灯片放映”）；}，
6000);
});

HTML代码

<div id="dbanner" class="change-color">
<div class="dcontent">
  [http://carrentalchennai.in/][1] <strong> South Indian Tour Packages </strong> [Google Authorised Reseller Chennai][1] by 
         <code> [http://www.alphabetwebz.com/][1] </code> <span class="dtime"> [http://www.carrentalinchennai.com/][1]</span><span     id="dcountdown"></span>
  </div>
  <div id="dclose">close me!</div>

  </div>

CSS代码

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
  body {
    background-color: #000;
  }

  #dbanner {
    position: fixed;
    bottom: 0px;
    height: auto;
    width: 100%;
    padding: 30px 0 30px 0;
    color: #fff;
    text-align: center;
    font-family: "Open Sans";
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
  }

  .dcontent {
    padding: 0px 30px 0px 30px;
    font-size: 16px;
  }

  .dcontent strong {
    font-size: 30px;
    color: yellow;
    white-space: nowrap;
  }

  .dcontent code {
    font-size: 30px;
    padding: 2px 5px 2px 5px;
    color: #EED183;
    border: 1px dashed #EED183;
    background-color: #0C3D4C;
    white-space: nowrap;
  }

  .dtime {
    font-size: 18px;
    background-color: #FF2A2A;
    padding: 0 10px 0 10px;
    white-space: nowrap;
  }

  #dclose {
    position: absolute;
    font-size: 8px;
    height: 20px;
    line-height: 20px;
    top: 5px;
    right: 10px;
    color: #fff;
  }

  #dclose:hover {
    cursor: pointer;
  }

  .change-color {
    background-color: #107460;
    color: #FFF;
    text-align: center;
    animation-name: homeCycle;
    animation-duration: 6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-animation-name: homeCycle;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
  }

  @keyframes homeCycle {
    0% {
      background-color: #727272;
    }
    25% {
      background-color: #86C14D;
    }
    50% {
      background-color: #0088CC;
    }
    75% {
      background-color: #0C3D4C;
    }
  }

  @-webkit-keyframes homeCycle {
    0% {
      background-color: #727272;
    }
    25% {
      background-color: #86C14D;
    }
    50% {
      background-color: #0088CC;
    }
    75% {
      background-color: #0C3D4C;
    }
  }

  .countdown-section {
    padding: 0 5px 0 5px;
  }

  .countdown-amount {
    padding: 0 5px 0 0;
  }

  .countdown-period {
    text-transform: uppercase;
  }

  .countdown-descr {}

由于某种原因，它仍然不起作用。当按下箭头时，我的横幅会从左侧滑入一个新图像。但我希望它也能在计时器上从左边滑动。我的css可能会阻止此函数正常工作吗？
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,700italic);
  body {
    background-color: #000;
  }

  #dbanner {
    position: fixed;
    bottom: 0px;
    height: auto;
    width: 100%;
    padding: 30px 0 30px 0;
    color: #fff;
    text-align: center;
    font-family: "Open Sans";
    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
  }

  .dcontent {
    padding: 0px 30px 0px 30px;
    font-size: 16px;
  }

  .dcontent strong {
    font-size: 30px;
    color: yellow;
    white-space: nowrap;
  }

  .dcontent code {
    font-size: 30px;
    padding: 2px 5px 2px 5px;
    color: #EED183;
    border: 1px dashed #EED183;
    background-color: #0C3D4C;
    white-space: nowrap;
  }

  .dtime {
    font-size: 18px;
    background-color: #FF2A2A;
    padding: 0 10px 0 10px;
    white-space: nowrap;
  }

  #dclose {
    position: absolute;
    font-size: 8px;
    height: 20px;
    line-height: 20px;
    top: 5px;
    right: 10px;
    color: #fff;
  }

  #dclose:hover {
    cursor: pointer;
  }

  .change-color {
    background-color: #107460;
    color: #FFF;
    text-align: center;
    animation-name: homeCycle;
    animation-duration: 6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    -webkit-animation-name: homeCycle;
    -webkit-animation-duration: 6s;
    -webkit-animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
  }

  @keyframes homeCycle {
    0% {
      background-color: #727272;
    }
    25% {
      background-color: #86C14D;
    }
    50% {
      background-color: #0088CC;
    }
    75% {
      background-color: #0C3D4C;
    }
  }

  @-webkit-keyframes homeCycle {
    0% {
      background-color: #727272;
    }
    25% {
      background-color: #86C14D;
    }
    50% {
      background-color: #0088CC;
    }
    75% {
      background-color: #0C3D4C;
    }
  }

  .countdown-section {
    padding: 0 5px 0 5px;
  }

  .countdown-amount {
    padding: 0 5px 0 0;
  }

  .countdown-period {
    text-transform: uppercase;
  }

  .countdown-descr {}