[英]JavaScript image banner timer HTML
I want to be able to make my image banner move on to the next image after a few seconds. 我希望能够在几秒钟后将我的图像横幅移到下一张图像。 I've tried a few things but nothing has worked.
我已经尝试了一些方法,但是没有任何效果。 I believe I can use JavaScript to do this.
我相信我可以使用JavaScript来做到这一点。
Any help will be much appreciated! 任何帮助都感激不尽!
I'll put the code up: 我将编写代码:
<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>
A simple function to fadein/out your images. 淡入/淡出图像的简单功能。 I would recommend using
position:absolute;
我建议使用
position:absolute;
on your li elements so that they lay on-top of each other. 在您的li元素上,使它们彼此重叠。
<script>
$(function(){
$('#slideshow li:gt(0)').hide();
setInterval(function(){
$('#slideshow :first-child').fadeOut()
.next('li').fadeIn()
.end().appendTo('#slideshow');},
6000);
});
</script>
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 CODE 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 CODE 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 {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.