如何制作使图像从右向左移动的图像滑块？

时间：2019-01-07 19:18:29

标签： javascript html css

伙计们，我正在网站上制作图像滑块，但我的主要功能有所下降，但是我希望能有一个过渡，让您看到下一个图像而不是仅仅出现在视图中。有点像这个网站上的那个。

https://allisonstexasbbq.com/

这也是指向我的网站的链接，下面发布的代码不完整，因为此处要发布的代码太多，所以这是我的小提琴。

http://jsfiddle.net/0ekqLu4c/

p.s我还意识到您看不到我的图像，因为那里保存到了我的机器上。不幸的是，我不知道该如何解决。

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}


/*HEADER*/

.logo {
	text-transform: uppercase;
	color: white;
	font-family: 'Staatliches';
	font-size: 10rem;
	letter-spacing: 20px;
	font-weight: bolder;
	position: relative;
	left: 800px;
	top: 150px;
}

#header {
	background: url('img/mex-9.jpg');
	background-attachment: fixed;
	background-size: cover;
	width: 100vw;
	height: 100vh;
}

.btn-1, .btn-2, .btn-3 {
	background-color: white;
	width: 62px;
	margin-bottom: 9px;
	height: 8px;
	border-radius: 5px;
}

.btn-1 {
	background-color: lightgreen;
	position: relative;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

@keyframes btn-1-animate {
	from {width: 62px; left: 0px; top: 0px;}
	to { top: 75px; left: -12px; width: 84px;}
}

@keyframes btn-1-reverse {
	from {top: 75px; left: -12px; width: 84px;}
	to {top: 0px; left: 0px; width: 62px;}
}

.btn-2 {
	border-radius: none;
	background-color: white;
	position: relative;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	z-index: 1;
}

@keyframes btn-2-animate {
	from {top: 0px; left: 0px; width: 62px}
	to {top: 58px; left: 65px; width: 117px;}
}

@keyframes btn-2-reverse {
	from {top: 58px; left: 65px; width: 117px;}
	to {top: 0px; left: 0px; width: 62px;}
}

.btn-3 {
	background-color: #ff4d4d;
	position: relative;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

@keyframes btn-3-animate {
	from {top: 0px; left: 0px; width: 62px;}
	to {top: 41px; left: 180px; width: 160px;}
}

@keyframes btn-3-reverse {
	from {top: 41px; left: 180px; width: 160px;}
	to {top: 0px; left: 0px; width: 62px;}
}

.side-menu, .nav-btn {
	padding-top: 100px;
	padding-left: 50px;
}

.nav-btn {
	width: 70px;
	position: fixed;
	top: 5px;
	z-index: 10;
}

#header ul {
	border-radius: 10px;
	margin: 0;
	list-style-type: none;
	background-color: white;
	position: fixed;
	top: 200px;
	text-align: center;
	box-shadow: -15px 0px lightgreen;
}

.side-menu {
	position: relative;
	left: -2370px;
    transition: all 0.2s ease;
    z-index: 1;
}

.fa-times {
	position: fixed;
	left: -380px;
	top: 200px;
	font-size: 2rem;
	color: white;
	transition: all 0.2s ease;
}

.fa-times:hover {
	transform: scale(1.3);
	cursor: pointer;
}

#header li a {
	font-family: 'Kumar One Outline';
	text-decoration: none;
	font-size: 2.2rem;
	padding: 15px;
	color: grey;
	margin-bottom: 15px;

}

#header li:hover {
	transform: scale(1.15);
}
 
 #header li {
 	margin: 15px;
 	padding-left: 10px;
 	padding-right: 50px;
 	transition: all 0.35s ease;
 }

 #header li a:hover {
 	cursor: pointer;
 	font-weight: bolder;
 	color: #96ea96;
 }

 #header p {
 	float: right;
 	font-weight: bold;
 	font-size: 3.2rem;
    margin-top: -10px;
    margin-right: 100px;
 	color: white;
 	font-family: 'Cedarville Cursive';
 }

 /*ABOUT*/

 #about .container {
 	background-color: #339966;
 	width: 100vw;
 	overflow: auto;
 	padding-bottom: -400px;
 }

 #about h1 {
 	margin-top: 0;
 	font-family: 'Cedarville Cursive';
 	font-size: 3.5rem;
 	color: white;
 	text-align: center;
 	padding-top: 5px;
 }

 .line {
 	background-color: orange;
 	width: 0px;
 	height: 4px;
 	padding: 0;
 	border-radius: 5px;
 	text-align: center;
 	margin-left: 560px;
 	position: relative;
 	top: 90px;
 	transition: all 1s ease;
 }

 #about p {
 	font-family: 'Josefin Sans';
 	color: white;
 	font-size: 1.8rem;
 	width: 35%;
 	margin-left: 130px;
 }

 .image-slider {
 	background-color: grey;
 	background-image: url(img/f-0.jpeg);
 	background-position: center; /* Center the image */
 	background-repeat: no-repeat; /* Do not repeat the image */
  	background-size: cover; /* Resize the background image to cover the entire container */
 	width: 35%;
 	height: 250px;
 	margin-right: 160px;
 	padding-bottom: 100px;
 	position: relative;
 	top: -380px;
 	float: right;
 }

 .fa-caret-down {
 	color: white;
 	font-size: 4rem;
 	margin-top: 29%;
 	position: relative;
 }

 .left {
	transform: rotate(90deg);
	left: -40px;
 }

 .right {
	float: right;
	transform: rotate(-90deg);
	left: 40px;
 }

 .left:hover, .right:hover {
 	cursor: pointer;

 }

/*MENU*/

#menu .container {
	background-color: #e6ac00;
	width: 100vw;
	margin-top: -330px;
	clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
	overflow: hidden;
}

.shape-wrap {
 position: relative;
}

.shape-1 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #339966;
	border-bottom: 25px solid transparent;
	position: relative;
	top: 50px;
	left: -190px;
	display: inline-block;
	margin: 0;
}

.shape-2 {
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #26734d;
	border-bottom: 25px solid transparent;
	float: left;
	position: relative;
	top: 25px;
	display: inline-block;
	left: 10px;
}

.shape-3 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #40bf80;
	border-bottom: 25px solid transparent;
	position: relative;
	left: -195px;
	display: inline-block;
	top: 25px;
}

.shape-4 {
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #26734d;
	border-bottom: 25px solid transparent;
	float: left;
	position: relative;
	left: -40px;
	display: inline-block;
	top: 85px;
}

.shape-5 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #339966;
	border-bottom: 25px solid transparent;
	position: relative;
	left: -298px;
	display: inline-block;
	top: 110px;
}

.shape-6 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #339966;
	border-bottom: 25px solid transparent;
	position: relative;
	top: 230px;
	display: inline-block;
	left: -351px;
}

.shape-7 {
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #26734d;
	border-bottom: 25px solid transparent;
	float: left;
	position: relative;
	left: -90px;
	display: inline-block;
	top: 265px;
}

.shape-8 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #339966;
	border-bottom: 25px solid transparent;
	position: relative;
	top: 290px;
	display: inline-block;
	left: -405px;
}

.shape-9 {
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #26734d;
	border-bottom: 25px solid transparent;
	float: left;
	position: relative;
	left: -140px;
	display: inline-block;
	top: 325px;
}

.shape-10 {
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #40bf80;
	border-bottom: 25px solid transparent;
	position: relative;
	left: -410px;
	display: inline-block;
	top: 325px;
}

#menu h1 {
	font-size: 7rem;
	color: white;
	font-family: 'Cedarville Cursive';
	margin-left: 220px;
	position: relative;
	top: -450px;
}

.line-2 {
	background-color: #339966;
	width: 0px;
	height: 5px;
	border-radius: 5px;
	position: relative;
	top: -600px;
	left: 45px;
	transition: all 1s ease;
}

.platter {
	font-size: 2.3rem;
	font-family: 'Cedarville Cursive';
	color: #339966;
	margin-left: 60px;
}

.platter-info {
	font-size: 1.2rem;
	font-family: 'Josefin Sans';
	color: white;
	margin-left: 120px;
	margin-top: -50px;
	margin-bottom: 30px;
}

.item {
	font-family: 'Josefin Sans';
	font-size: 1.3rem;
}

.price {
	font-size: 1.3rem;
	font-family: 'Josefin Sans';
	display: block;
	margin-left: 400px;
	margin-bottom: -40px;
	position: relative;
	bottom: 40px;
}

.col-1 {
	margin-left: 200px;
	margin-top: 0px;
	position: relative;
	top: -550px;
}

.plat-4 {
	position: relative;
	left: 120px;
}

.plat-5 {
	position: relative;
	left: 75px;
}

.plat-6 {
	position: relative;
	left: 85px;
}

.info4tacos {
	position: relative;
	left: 70px;
	margin-bottom: 35px;
}

.plat-7 {
	position: relative;
	left: 100px;
}

.plat-8 {
	position: relative; 
	right: 50px;
}

.plat-9 {
	position: relative;
	left: 30px;
}

.info4breakfast {
	position: relative;
	left: 50px;
}

.col-2 {
	float: right;
	margin-top: -3185px;
	margin-right: 200px;
}

.plat-2 {
	position: relative;
	left: 70px;
	top: 15px;
}

.plat-3 {
	position: relative;
	left: 60px;
}

.right-border {
	float: right;
	transform: rotate(180deg);
	position: relative;
	top: 2400px;
	right: 10px;
}

/*HOURS*/

#hours .container {
	background-color: #339966;
	width: 100vw;
	position: relative;
	margin-top: -470px;
	clip-path: polygon(0% 4%, 5% 0%, 95% 0%, 100% 4%, 100% 100%, 0% 100%);
	overflow: hidden;
}

#hours h1 {
	text-align: center;
	font-size: 4rem;
	color: white;
	font-family: 'Cedarville Cursive';
	padding-bottom: 100px;
	margin-top: 0px;
	position: relative;
	bottom: 80px;
}

.day, .hour {
	text-align: center;
	background-color: white;
	font-size: 2.5rem;
	color: #666;
	padding-top: 10px;
	margin-bottom: 10px;
	width: 220px;
	font-family: 'Josefin Sans';
	border-right: 12px solid #40bf80;
}

.grid {
	display: grid;
	grid-template-columns: 270px 270px;
	grid-auto-rows: 65px;
	grid-gap: 15px;
	position: relative;
	left: 50%;
	margin-left: -272.5px;
	margin-top: -220px;
}

.move3 {
	top: 85px;
}

.move10 {
	position: relative;
	top: 265px;
}

.rotate {
	transform: rotate(180deg);
	width: 600px;
}

.hours-line, .hours-line2 {
	width: 500px;
	height: 10px;
	border-radius: 5px;
	position: relative;
	background-color: #ff4d4d;
	top: -300px;
	left: 30px;
}

.hours-line2 {
	background-color: lightgreen;
	left: 820px;
	top: -305px;
}

.lom {
	transform: rotate(-180deg);
}

/*CONTACT*/

.back-wrapper {
	background-color: #595959;
	width: 100vw;
	height: 650px;
	clip-path: polygon(0 0, 15% 15%, 85% 15%, 100% 0, 100% 100%, 0 100%);
	margin-top: -100px;
	overflow: hidden;
}

.contact-wrapper:before {
	content: '';
	background-color: #339966;
	width: 250px;
	height: 130px;
	position: absolute;
	left: 50%;
	margin-left: -125px;
	top: -91px;
	clip-path: polygon(15% 1%, 85% 0, 100% 30%, 100% 70%, 85% 100%, 15% 100%, 0% 70%, 0% 30%);
}

.contact-wrapper:after {
	content: '';
	background-color: #339966;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	width: 65px;
	height: 65px;
	position: absolute;
	top: 65px;
	left: 50%;
	margin-left: -32.5px;
}

.contact-wrapper {
	display: flex;
	justify-content: space-between;
	background-color: #404040;
	position: relative;
	margin-top: -552px;
}

.loc, .con {
	flex-basis: 48%;
}

.contact-wrapper h1 {
	font-family: 'Cedarville Cursive';
	color: white;
	font-size: 5rem;
	margin-bottom: 0;
	margin-top: 0;
	text-align: center;
}

.split {
	background-color: orange;
	width: 3px;
	height: 300px;
	position: relative;
	top: 160px;
}

.upArrow {
	font-size: 2.5rem;
	color: #404040;
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -55px;
	margin-left: -20px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.upArrow:hover {
	transform: scale(1.25);
	color: orange;
}

.to-top {
	font-family: 'Josefin Sans';
	color: #404004;
	font-size: 2rem;
	position: absolute;
	left: 50%;
	margin-left: -85px;
	font-weight: bold;
}

.phone, .email {
	color: white;
	font-size: 1.7rem;
	font-family: 'Josefin Sans';
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 70px;
}

textarea {
	outline: none;
	background-color: #333;
	border: none;
	margin: 15px;
	position: relative;
	left: 50%;
	margin-left: -158.75px;
	color: white;
}

input {
	margin: 20px;
	font-size: 1.25rem;
	position: relative;
	left: -95px;
	top: 10px;
	background-color: grey;
	border: none;
	border-radius: 4px;
	transition: all 0.2s ease;
}

input:hover {
	cursor: pointer;
	color: orange;
}

.review {
	font-size: 1.5rem;
	color: white;
	font-family: 'Josefin Sans';
	position: relative;
	left: 170px;
	top: -20px;
}

.fab {
	font-size: 3.3rem;
	margin-right: 15px;
	position: relative;
	left: 385px;
	top: -85px;
}

.recker {
	transform: rotate(90deg);
    width: 300px;
    height: 15px;
    position: relative;
    background-color: #595959;
    left: 30px;
    top: 120px;
    border-radius: 10px;

}

.main {
	width: 400px;
    height: 20px;
    position: relative;
    background-color: #595959;
    left: 80px;
    top: 100px;
    border-radius: 10px;
}

.rd {
	transform: rotate(90deg);
    width: 300px;
    height: 10px;
    position: relative;
    background-color: #595959;
    left: 280px;
    top: 80px;
    border-radius: 10px
}

.fa-map-pin {
	font-size: 4rem;
	color: orange;
	position: relative;
	left: 290px;
	top: -35px;
}

.loc p {
	position: relative;
	color: white;
	font-family: 'Josefin Sans';
}

.con-border, .loc-border {
	position: absolute;
}

.loc-border {
	transform: rotate(180deg);
}

/*FOOTER*/

#footer .container {
	width: 100%;
	background-color: #595959;
	text-align: center;
	position: relative;
	margin-top: -54px;
	margin-bottom: 0;
}

#footer h1 {
	margin: 0;
	font-family: 'Josefin Sans';
	font-weight: bolder;
	font-size: 1.5rem;
	padding: 15px;
	color: darkgrey;
}

0 个答案:

没有答案
相关问题
最新问题