kropki pod sliderem

pytanie zadane 12 grudnia 2015 w JavaScript przez Mako Użytkownik (650 p.)
edycja 12 grudnia 2015 przez Mako

Witam jak zrobić zrobić podświetlane kropki z fontello pod sliderem? Chodi o to aby zmieniały się wtedy gdy slajd się zmienia na dany kolor. Kropki jeż mam wstawione i podpięte do slidera.

1 odpowiedź

odpowiedź 12 grudnia 2015 przez writen Nałogowiec (29,060 p.)

Ja osobiście bardzo się cieszę, że chcesz coś takiego zrobić, tylko po co nam to tutaj oznajmiasz?

Forum służy do zadawania pytań. Jeśli masz jakiś konkretny problem to wal śmiało, ale ja tu nie widzę nic takiego.

komentarz 12 grudnia 2015 przez Mako Użytkownik (650 p.)

sorki za złe sformułowanie chodziło jak zrobić

komentarz 12 grudnia 2015 przez writen Nałogowiec (29,060 p.)

Nie powiedziałeś z czym dokładnie masz problem, jaki to slider, nie podałeś żadnego kodu, więc mogę jedynie wytłumaczyć to teoretycznie, choć w ten sposób nie wiem czy to rowiąże twój problem.

W kodzie tam gdzie zmieniasz slajd musisz dodać funkcję, która najpierw zmieni kolor wszystkich kropek na ten, który nie jest podświetleniem, a nastepnie zmieni kolor jednej, konkretnej kropki na kolor podświetlenia. Musisz ustalić, który z kolei slajd będzie wyświetlany, żeby wiedzieć której kropki kolor zmienić.

komentarz 13 grudnia 2015 przez Mako Użytkownik (650 p.)

HTML:
<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<title> InterGroup </title>
		
		<!-- metas -->
			<meta charset="UTF-8" />
			
		<!-- CSS files -->
			<link rel="stylesheet" href="CSS/fontello/css/fontello.css" type="text/css" />
			<link rel="stylesheet" href="CSS/main.css" type="text/css" />
					
		<!-- fonts -->
			<link href='https://fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		
		<!-- JavaScript files -->
			<script type="text/javascript" src="JavaScript/Jquery.js"></script>
			<script type="text/javascript" src="JavaScript/main.js"></script>
			
	</head>
	
	<body onload="zmienslajd()">
		<div class="nav">
			<div id="puts">
				<div id="logo">
					<span>  
						<img src="grafika/nav/logo.png" height="50px" width="50px" />
					</span>
				</div>
				<div id="puts2">
					<input type="text" placeholder="Nazwa Urzytkownika" id="NameLogin" />
					<input type="text" placeholder="Hasło" id="Pasword" />					
					<input type="Submit" value="Zaloguj się" id="Login" />					
					<i class="icon-user-plus" title="Zarejstruj się"></i>
				</div>
				<div style="clear:both"></div>
			</div>
		</div>
		<div id="slider"></div>
		<div id="Slideputs">
			<i class="icon-circle" onclick="ustawslajd(1)" id="slide-1"></i>
			<i class="icon-circle" onclick="ustawslajd(2)" id="slide-2"></i>
			<i class="icon-circle" onclick="ustawslajd(3)" id="slide-3"></i>
			<i class="icon-circle" onclick="ustawslajd(4)" id="slide-4"></i>
			<i class="icon-circle" onclick="ustawslajd(5)" id="slide-5"></i>
		</div>
	</body>
</html>

CSS:

body {
	background-color: #171717;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	margin: 0px !important;
}

	.nav {
		background-color: #BF0D37;
		padding: 10px;
		position: fixed;
		width: 100%;
		text-align: center;
		z-index: 100;
		margin-left: auto;
		margin-right: auto;
	}
	
		#puts {
			margin-left: auto;
			margin-right: auto;
			width: 1000px;
		}
	
			#logo {
				color: #ffffff;
				float: left;
			}
				
				#logo span {
					font-size: 30px;
				}
				
			#search {
				float: left;
				padding-left: 10px;
				margin-top: 10px;
			}	
			
				#search input {
					border: 2px solid #858585;
					border-radius: 15px;
					padding-right: 10px;
					padding-left: 10px;
					height: 30px;
					width: 350px;
					font-size: 18px;
				}
				
				#search i {
					color: #ffffff;
					padding: 10px;
					cursor: pointer;
				}
				
				#search i:hover {
					background-color: #FF0D37;
					padding: 10px;
					border-radius: 25px;
					transition-duration: 0.3s;
				}
			
			#puts2 {
				color: #ffffff;
				font-size: 35px;
				padding-top: 7px;
			}
				
				#puts2 i {
					cursor: pointer;
				}
				
				#puts2 i:hover {
					color: #BF0D37;
					background-color: #ffffff;
					border-radius: 5px;
					transition-duration: 0.3s;
				}
				
					#puts2 input {
						float: left;
						margin-left: 5px;
						border: 1px solid #858585;
						border-radius: 5px;
						padding-right: 5px;
						padding-left: 5px;
						margin-top: 13px;
					}
					
						#puts2 input:first-child {
							margin-left: 20px;
						}
						
						#Login {
							border: 0px;
							cursor: pointer;
						}
							
							#Login:hover {
								background-color: #91E4FF;
								transition-duration: 0.3s;
							}
	#slider {
		width: auto;
		text-align: center;
		padding-top: 100px		
	}

		#slider img {
			height: 800px;
			width: 1340px;
			border-radius: 20px;
			border: 5px solid #ffffff;
		}
		
	#Slideputs {
		text-align: center;
	}
	
		#Slideputs i {
			color: #ffffff;
			cursor: pointer;
		}
		
			#Slideputs i:hover {
				color: #DBDBDB;
				transition-duration: 0.2s;
			}
			
			#Slideputs i:active {
				color: #00BFFF;
				transition-duration: 0.2s;
			}

JavaScript:

var numer = Math.floor(Math.random()*5)+1;

	var timer1 = 0;
	var timer2 = 0;

function ustawslajd(nrslajdu)
{
	clearTimeout(timer1);
	clearTimeout(timer2);
	numer = nrslajdu - 1;
		
	
	schowaj();
	setTimeout("zmienslajd()", 500);
}

function schowaj()
{
	$("#slider").fadeOut(500);
}

function zmienslajd() 
{
	numer++; if (numer>5) numer=1;
	
	var plik = "<img src=\"grafika/slider/slide"+numer+".png\" />";
	
	document.getElementById("slider").innerHTML = plik;
	$("#slider").fadeIn(500);
				
	timer1 = setTimeout("zmienslajd()", 5000);
	timer2 = setTimeout("schowaj()", 4500);
}