Упрощение кода для слайд шоу

Question

Помоги пожалуйста. Только код js

    var trg=document.getElementsByClassName('target');
		function slide1(){
				document.getElementById('slide_1').style.transform="translateX(145%) scale(1.6)";
				document.getElementById('slide_2').style.transform="translateX(145%)";
				document.getElementById('slide_3').style.transform="translateX(145%)";
				document.getElementById('slide_4').style.transform="translateX(425%) translateY(-180%)";
				trg[0].style.backgroundColor="red";
				trg[1].style.backgroundColor="white";
				trg[2].style.backgroundColor="white";
				trg[3].style.backgroundColor="white";
		}
		function slide2(){
				document.getElementById('slide_2').style.transform="translateX(0) scale(1.6)";
				document.getElementById('slide_1').style.transform="translateX(0)";
				document.getElementById('slide_3').style.transform="translateX(0)";
				document.getElementById('slide_4').style.transform="translateX(290%) translateY(-180%)";
				trg[1].style.backgroundColor="red";
				trg[0].style.backgroundColor="white";
				trg[2].style.backgroundColor="white";
				trg[3].style.backgroundColor="white";
		}
		function slide3(){
				document.getElementById('slide_3').style.transform="translateX(-145%) scale(1.6)";
				document.getElementById('slide_1').style.transform="translateX(-145%)";
				document.getElementById('slide_2').style.transform="translateX(-145%)";
				document.getElementById('slide_4').style.transform="translateX(160%) translateY(-180%)";
				trg[2].style.backgroundColor="red";
				trg[1].style.backgroundColor="white";
				trg[0].style.backgroundColor="white";
				trg[3].style.backgroundColor="white";
		}
		function slide4(){
				document.getElementById('slide_4').style.transform="translateX(0) scale(1.6) translateY(-110%)";
				document.getElementById('slide_1').style.transform="translateX(-290%)";
				document.getElementById('slide_2').style.transform="translateX(-290%)";
				document.getElementById('slide_3').style.transform="translateX(-320%)";
				trg[3].style.backgroundColor="red";
				trg[1].style.backgroundColor="white";
				trg[2].style.backgroundColor="white";
				trg[0].style.backgroundColor="white";
		}

.block{
	position: relative;
	display: inline-block;
	height: 20vw;
	width: 20vw;
	border-radius: 50%;
	margin: 1% 3%;
	font-family: 'Acme', sans-serif;
	color: white;
	text-align: center;
	background-size: cover;
	background-position: center;
	z-index: 999;
	cursor: pointer;
	background-color: white;
	border: .2vw solid black;
}

.hot-cat-text{
	font-family: 'Acme', sans-serif;
	color: white;
	font-size: 4vw;
	text-align: center;
	padding: 1vw 0;
	z-index: 900;
}

.hot-1{
	background-image: url('img/instrumente.png');
}

.hot-2{
	background-image: url('img/accesorii.png');
}

.hot-3{
	background-image: url('img/produse.png');
}

.hot-text{
	position: relative;
	top: 100%;
	font-size: 2vw;
}

.block:hover{
	transform: scale(1.2);
	border: .2vw solid red;
}

.slider-show{
	position: absolute;
	width: 100%;
	height: 25vw;
	margin: 1% 0;
	text-align: center;
	overflow: hidden;
}

.s2{
  transform: scale(1.6);
}

.slide{
	display: inline-block;
	background-size: cover;
	background-position: center;
	height: 50%;
	width: 20%;
	margin: 5%;
	position: relative;
	background-color: white;
	transition: 1s;
	border: .01vw solid white;
	overflow: hidden;
  background-color: white;
}


.s4{
	transform: translateX(290%) translateY(-180%);
}

.slide:hover{
	border: .01vw solid red;
}

.slide-target{
	position: absolute;
	display: inline;
	bottom: 0;
  	left: 50%;
}

.target{
	position: absolute;
	border-radius: 50%;
	width: 1.5vw;
	height: 1.5vw;
	background-color: white;
	bottom: 0;
	transition: 1s;
}

.t1{
	left: -3vw;
}

.t2{
	left: -1vw;
	background-color: red;
}

.t3{
	left: 1vw;
}

.t4{
	left: 3vw;
}

.target:hover{
	background-color: red;
	cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8">
	<title>AllAuto</title>
</head>
<body bgcolor="black">
	<div class="container" id="basic-block">
		<div class="slider-show">
			<div class="slide s1" onclick="slide1()" id="slide_1">
				
			</div>
			<div class="slide s2" onclick="slide2()" id="slide_2">
				
			</div>
			<div class="slide s3" onclick="slide3()" id="slide_3">
				
			</div>
			<div class="slide s4" onclick="slide4()" id="slide_4">
				
			</div>
			<div class="slide-target">
				<div class="target t1" id="target1" onclick="slide1()"></div>
				<div class="target t2" id="target2" onclick="slide2()"></div>
				<div class="target t3" id="target3" onclick="slide3()"></div>
				<div class="target t4" id="target4" onclick="slide4()"></div>
			</div>
		</div>
	</div>
	<div class="ex">
		
	</div>
</body>
</html>

БЛОГ НА HUSL

Упрощение кода для слайд шоу

Ответы (0 шт):