JavaScript 图像横幅计时器 HTML

Question

我希望能够让我的图片横幅在几秒钟后移动到下一张图片。我尝试了几件事，但没有任何效果。我相信我可以使用 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>      

Answer 1

淡入/淡出图像的简单功能。我建议在你的 li 元素上使用position:absolute;，这样它们就可以相互叠加了。

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

Answer 2

JS CODE

$(function() {
var endDate = new Date();
endDate = new Date(2017, 12 - 1, 31);
$('#dcountdown').countdown({
until: endDate
});

$('#dclose').click(function() {
$(this).parent().slideUp();
});
});

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