htmlcssjs实现背景图的切换和倒计时跳转的功能
Posted 保护眼睛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了htmlcssjs实现背景图的切换和倒计时跳转的功能相关的知识，希望对你有一定的参考价值。
效果
跳转到其它的页面
html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="css/back.css" rel="stylesheet">
</head>
<body class="body">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/back.js"></script>
<div style="float: none;margin-left: 45%;margin-top: 20%;margin-right: 100px ">
<div style="float: none;margin-left: 0px;margin-top: 20%;margin-right: 100px ">
<h3> 还 有</h3>
</div>
<span style="float: none;margin-left: 8%;margin-top: 20%;margin-right: 100px ">
<span id="totalSecond">10</span>
<script language="javascript" type="text/javascript" src="js/time.js">
</script>
</span>
<div>
<h3> 秒钟之后跳转！</h3>
</div>
<div style="float: none;margin-bottom: 15px">
<button type="button" class="button" onclick="goHome()">点击我立即跳转回首页</button>
</div>
</div>
<div class="screenbg">
<ul>
<li><a href="javascript:;"><img src="images/0.jpg"></a></li>
<!-- <li><a href="javascript:;"><img src="images/1.jpg"></a></li>-->
<!-- <li><a href="javascript:;"><img src="images/2.jpg"></a></li>-->
<li><a href="javascript:;"><img src="images/3.png"></a></li>
<!-- <li><a href="javascript:;"><img src="images/4.png"></a></li>-->
<!-- <li><a href="javascript:;"><img src="images/5.jpg"></a></li>-->
<!-- <li><a href="javascript:;"><img src="images/6.jpg"></a></li>-->
<li><a href="javascript:;"><img src="images/7.jpg"></a></li>
<li><a href="javascript:;"><img src="images/8.png"></a></li>
<li><a href="javascript:;"><img src="images/9.png"></a></li>
<li><a href="javascript:;"><img src="images/10.png"></a></li>
<li><a href="javascript:;"><img src="images/11.png"></a></li>
<li><a href="javascript:;"><img src="images/12.png"></a></li>
<li><a href="javascript:;"><img src="images/13.png"></a></li>
</ul>
</div>
</body>
</html>
css文件
.button {
border-radius: 5px;
color: #ffff00;
text-shadow: 0 1px 0 #484f58;
margin-bottom: 20px;
margin-right: 5px;
border: 1px solid #d58512;
box-shadow: 0 1px 0 #616a74 inset, 0 1px 5px #212528;
background: -webkit-linear-gradient(top, #474d54, #2f363d);
background: -moz-linear-gradient(top, #474d54, #2f363d);
background: -ms-linear-gradient(top, #474d54, #2f363d);
background: -o-linear-gradient(top, #474d54, #2f363d);
background: linear-gradient(top, #474d54, #2f363d);
}
.screenbg {
position: fixed;
bottom: 0;
left: 0;
z-index: -999;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100%;
}
.screenbg ul li {
display: block;
list-style: none;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1000;
float: right;
}
.screenbg ul a {
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
margin: 0;
padding: 0;
cursor: default;
}
.screenbg a img {
vertical-align: middle;
display: inline;
border: none;
display: block;
list-style: none;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1000;
float: right;
}
.lable{
color: coral;
font-size: 15px
}
js文件
背景图切换的功能
$(function(){
$(".screenbg ul li").each(function(){
$(this).css("opacity","0");
});
$(".screenbg ul li:first").css("opacity","1");
var index = 0;
var t;
var li = $(".screenbg ul li");
var number = li.length;
function change(index){
li.css("visibility","visible");
li.eq(index).siblings().animate({opacity:0},3000);
li.eq(index).animate({opacity:1},3000);
}
function show(){
index = index + 1;
if(index<=number-1){
change(index);
}else{
index = 0;
change(index);
}
}
t = setInterval(show,2000);
//根据窗口宽度生成图片宽度
var width = $(window).width();
$(".screenbg ul img").css("width",width+"px");
});
动态计时器的js文件
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById('totalSecond').innerText;
} else {
second = document.getElementById('totalSecond').textContent;
}
setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
location.href = 'list.html';
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').textContent = second--;
} else {
document.getElementById('totalSecond').textContent = second--;
}
}
}
function goHome() {
window.location.href = "list.html";
}
以上是关于htmlcssjs实现背景图的切换和倒计时跳转的功能的主要内容，如果未能解决你的问题，请参考以下文章
Vue路由实现页面跳转的两种方式（router-link和JS）
在货物监控设备研发中，Boot Loader和APP程序跳转的注意事项