Может ли автоматическое фоновое слайд-шоу с эффектом затухания быть сделано только с html и css, или мы должны также использовать JS и jQuery? - PullRequest
Новая
       43

Может ли автоматическое фоновое слайд-шоу с эффектом затухания быть сделано только с html и css, или мы должны также использовать JS и jQuery?

0 голосов
/ 31 мая 2018

Я хочу запустить автоматическое фоновое слайд-шоу для моего сайта с эффектом затухания или любым другим, похожим на затухание.скажите мне или добавьте код для автоматического слайд-шоу в моем коде.Я пытался много раз, но я не могу запустить слайд-шоу.

это то, что я хочу сделать, поэтому, пожалуйста, помогите мне.

сначала попробуйте сделать автоматическое слайд-шоу с затуханием с помощью css и html, если это невозможно, тогда используйте jQuery / JS

Мой HTML: 

body,
html {
	width: 100%;
	height: 100%;
	background-image: url(splash_image.jpg);
	background-size: cover;
}

* {
	overflow-x: hidden;
	font-family: "Raleway", sans-serif;
}

.logo {
	margin-top: 4%;
	font-size: 8vw;
	color: #3385ff;
}

.nav {
	list-style-type: none;
	padding: 0;
	background-color: #333;
	top: 0%;
	left: 0%;
	width: 100%;
	margin-top: 0%;
	margin-bottom: 0%;
	overflow: visible;
	position: absolute;
	width: 100%;
}

.nav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.active {
	background-color: #80e5ff;
	color: black !important;
}

.nav .icon {
	display: none;
}

.dropdown {
	float: left;
	overflow: hidden;
}

.dropdown .dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.nav a:hover:not(.active),
.dropdown:hover .dropbtn {
	background-color: #555;
	color: white;
}

.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.logo-image {
	position: relative;
	animation-name: image;
	animation-duration: 2s;
	animation-delay: 3s;
	animation-fill-mode: both;
	margin-top: -4%;
}

@keyframes image {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#button {
	padding: 18px 36px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin-top: 4%;
	transition-duration: 0.4s;
	cursor: pointer;
	font-weight: 600;
	opacity: 0;
}

.button2 {
	background-color: transparent;
	color: white;
	border: 2px solid white;
}

.button2:hover {
	background-color: white;
	color: black;
	font-weight: 800;
}

#button-2nd {
	padding: 18px 36px;
	text-align: center;
	font-size: 16px;
	margin-top: 4px;
	margin-left: 50px;
	opacity: 0;
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	font-weight: 600;
}

.button2-2nd {
	background-color: #3385ff;
	color: white;
	border: 2px solid #3385ff;
}

.button2-2nd:hover {
	opacity: 0.2;
	font-weight: 800;
}

.footer {
	position: fixed;
	left: 37%;
	bottom: 0;
	width: 25%;
	color: white;
	text-align: center;
	font-size: 16px;
}

.wrapper {
	text-align: center;
}

@media only screen and (max-width: 500px) {
	.logo {
		margin-top: 50px;
	}
	.logo-image {
		margin-top: 20px;
	}
	#button {
		padding: 6px 10px;
		margin-top: 100px;
	}
	#button-2nd {
		padding: 6px 10px;
	}
}

@media screen and (max-width: 500px) {
	.nav a:not(:first-child),
	.dropdown .dropbtn {
		display: none;
	}
	.nav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 500px) {
	.nav.responsive {
		position: absolute;
	}
	.nav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.nav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.nav.responsive .dropdown {
		float: none;
	}
	.nav.responsive .dropdown-content {
		position: relative;
	}
	.nav.responsive .dropdown .dropbtn {
		display: block;
		width: 100%;
		text-align: left;
	}
}
<!DOCTYPE html>
 <html>
 <head>

 <title>FosterX Gaming</title>

 <link rel="shortcut icon" type="image/png" href="logo.png">
 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="FosterX.css">
 <link href="https://fonts.googleapis.com/css?family=Raleway:200" 
 rel="stylesheet">
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"> 
 </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">

 </head>

 <body onload="typeWriter()">

 <div class="nav" id="Topnav">
 <a href="#" class="active">Home</a>
 <a href="#">Contact</a>
 <a href="#Login">Login</a>
 <div class="dropdown">
 <button class="dropbtn">Games 
  <i class="fa fa-caret-down"></i>
 </button>
 <div class="dropdown-content">
  <a href="#">PUBG</a>
  <a href="#">Fortnite</a>
  <a href="#">PUBG mobile</a>
</div>
</div> 
<a href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" 
onclick="myFunction()">&#9776;</a>
</div>

<div class="wrapper">

<div class="logo" id="demo"></div>

 <img class="logo-image img-responsive" src="logo.png" alt="foster-logo" 
 height="30%" width="15%"><br><br>



<button class="button button2" id="button">Enter</button>
<button class="button-2nd button2-2nd" id="button-2nd">Leave</button>



<div class="footer">
<p>&reg; All Rights Reserved</p>
</div>
</div>

<script>
var i = 0;
var txt = '  FosterX Gaming';
var speed = 20;

function typeWriter() {
if (i < txt.length) {
document.getElementById("demo").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, 200);
}
}
</script>

<script>
$("#button").delay(3000).animate({"opacity": "1"}, 700)
</script>

<script>
$("#button-2nd").delay(3500).animate({"opacity": "1"}, 700)
</script>

<script>
function myFunction() {
var x = document.getElementById("Topnav");
if (x.className === "nav") {
    x.className += " responsive";
} else {
    x.className = "nav";
}
}
</script>

</body>
</html>
...