JAVASCRİPT SLIDER ve ÖRNEK UYGULAMALAR

Tarhi : 14-06-2017 12:01:53 | Yazar : ÇAĞLAR BOSTANCI

JAVASCRIPT SLIDER YAPIMI

Javascript kodları ile çok farklı algoritmalar da haber, duyuru, ,resim gibi bir çok slaytlar yapabiliriz. Bu yazımda sizlere basitçe hazırlanmış bir slayt örneği vereceğim. BAŞARILAR.

Öncelikle <head>css</head> elementleri arasına css kodlarımızı yazalım.

<style>
@keyframes hareketsagsol{
		from{ right:-700px; opacity:0.5;}to{right:0px; opacity:1;}
	}
@keyframes hareketsagsol2{
		from{ right:0px;opacity:1;}to{right:700px;opacity:0.5;}
	}
#slider{
	
	width:700px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:1px solid green;
	}
.slayt{
	width:700px;
	height:300px;
	overflow:hidden;
	position:absolute;
	top:0;
	right:-700px;
    opacity:0.5;
	}
.ileri,.geri{
	width:30px;
	height:30px;
	line-height:30px;
	background-color:rgba(153,153,153,0.5);
	text-align:center;
	font-weight:600;
	position:absolute;
	top:45%;
	cursor:pointer;
	}
.aciklama{
	width:100%;
	height:auto;
	padding:10px;
	color:white;
	opacity:0.4;
	background-color:rgba(0,0,0,0.4);
	position:absolute;
	bottom:0;
	}
.slaytsirasi ul{ list-style: none; padding:0; margin:0;}
.slaytsirasi ul li{ display:inline-block; padding:0.5em; background-color:rgba(255,255,255,0.5); border-radius:50%; transition:all .5s linear}
.slaytsirasi ul li:hover{ background-color:rgba(242, 17, 17, 0.85);}
.aktifLi{ background-color:rgba(242, 17, 17, 1) !important;}
.slaytsirasi{ position: absolute; top:2px;left:5px;}
</style>

<style>

@keyframes hareketsagsol{

from{ right:-700px; opacity:0.5;}to{right:0px; opacity:1;}

}

@keyframes hareketsagsol2{

from{ right:0px;opacity:1;}to{right:700px;opacity:0.5;}

}

#slider{

width:700px;

height:300px;

overflow:hidden;

position:relative;

border:1px solid green;

}

.slayt{

width:700px;

height:300px;

overflow:hidden;

position:absolute;

top:0;

right:-700px;

opacity:0.5;

}

.ileri,.geri{

width:30px;

height:30px;

line-height:30px;

background-color:rgba(153,153,153,0.5);

text-align:center;

font-weight:600;

position:absolute;

top:45%;

cursor:pointer;

}

.aciklama{

width:100%;

height:auto;

padding:10px;

color:white;

opacity:0.4;

background-color:rgba(0,0,0,0.4);

position:absolute;

bottom:0;

}

.slaytsirasi ul{ list-style: none; padding:0; margin:0;}

.slaytsirasi ul li{ display:inline-block; padding:0.5em; background-color:rgba(255,255,255,0.5); border-radius:50%; transition:all .5s linear}

.slaytsirasi ul li:hover{ background-color:rgba(242, 17, 17, 0.85);}

.aktifLi{ background-color:rgba(242, 17, 17, 1) !important;}

.slaytsirasi{ position: absolute; top:2px;left:5px;}

</style>

Daha sonra html kodlarımız <body>html</body> elementleri arasına yazalım.

<div id="slider">


<div class="slayt" style="background-color:#060;">
    	<img src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" width="700" height="300">


<div class="aciklama">MERHABA 1</div>


</div>




<div class="slayt" style="background-color:#CF0">
    	<img src="https://www.w3schools.com/w3images/sound.jpg" width="700" height="300">


<div class="aciklama">MERHABA 2</div>


</div>




<div class="slayt" style="background-color:#03F">
    	<img src="https://www.w3schools.com/w3images/workbench.jpg" width="700" height="300">


<div class="aciklama">MERHABA 3</div>


</div>




<div class="slayt" style="background-color:red">
    	<img src="https://www.w3schools.com/w3images/coffee.jpg" width="700" height="300">


<div class="aciklama">MERHABA 4</div>


</div>




<div class="slayt" style="background-color:green">
    	<img src="https://www.w3schools.com/w3css/img_nature_wide.jpg" width="700" height="300">


<div class="aciklama">MERHABA 5</div>


</div>




<div class="slayt" style="background-color:yellow">
    	<img src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" width="700" height="300">


<div class="aciklama">MERHABA 6</div>


</div>


    <!--Slayt numaraland覺rma-->


<div class="slaytsirasi">


<ul>


 	<li onmouseover="aktif=0; slider();"></li>




 	<li onmouseover="aktif=1; slider();"></li>




 	<li onmouseover="aktif=2; slider();"></li>




 	<li onmouseover="aktif=3; slider();"></li>




 	<li onmouseover="aktif=4; slider();"></li>




 	<li onmouseover="aktif=5; slider();"></li>


</ul>


</div>


</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<div class="aciklama">MERHABA 1</div>

</div>

<div class="aciklama">MERHABA 2</div>

</div>

<div class="aciklama">MERHABA 3</div>

</div>

<div class="aciklama">MERHABA 4</div>

</div>

<div class="aciklama">MERHABA 5</div>

</div>

<div class="aciklama">MERHABA 6</div>

</div>

<ul>

</ul>

</div>

Son alarak javascript kodlarımız yazalım.

<script type="text/javascript" language="javascript">
	var aktif=0;
	var pasif=null;
	slider();
	
	var ileri=document.createElement('div');
	ileri.style.right="0";
	ileri.innerHTML=">";
	ileri.className="ileri";
	ileri.onclick=function(){slider();}
	var geri=document.createElement("div");
	geri.style.left="0";
	geri.innerHTML="<";
	geri.className="geri";
	geri.onclick=function(){ aktif-=2; slider();}
	var anadiv=document.getElementById("slider");
	anadiv.appendChild(ileri);
	anadiv.appendChild(geri);
	
	
	anadiv.onmouseover=function(){clearTimeout(slayt_zaman);}
	anadiv.onmouseout=function(){slayt_zaman=setInterval(slider,5000);}
	
	function slider(){
	    
		if(aktif>=document.getElementsByClassName("slayt").length){ 
		aktif=0;
		}else if(aktif<0){ 
		aktif=document.getElementsByClassName("slayt").length-1; }
	if(pasif!=null){
		
		var pasifdiv=document.getElementsByClassName("slayt")[pasif];
		pasifdiv.style.animation="hareketsagsol2 linear 1s";
		pasifdiv.style.right="-700px";
		
		}
		
		for(var s=0;s<document.getElementsByTagName("li").length;s++){
		    document.getElementsByTagName("li")[s].setAttribute("class","");
		}
		
		var aktifdiv=document.getElementsByClassName("slayt")[aktif];
		aktifdiv.style.animation="hareketsagsol linear 1s";
		aktifdiv.style.opacity="1";
		aktifdiv.style.right="0px";
    		document.getElementsByTagName("li")[aktif].setAttribute("class","aktifLi");
		
	pasif=aktif;
	aktif++;
	}
		var slayt_zaman=setInterval(slider,5000);
</script>

var aktif=0;

var pasif=null;

slider();

var ileri=document.createElement('div');

ileri.style.right="0";

ileri.innerHTML=">";

ileri.className="ileri";

ileri.onclick=function(){slider();}

var geri=document.createElement("div");

geri.style.left="0";

geri.innerHTML="<";

geri.className="geri";

geri.onclick=function(){ aktif-=2; slider();}

var anadiv=document.getElementById("slider");

anadiv.appendChild(ileri);

anadiv.appendChild(geri);

anadiv.onmouseover=function(){clearTimeout(slayt_zaman);}

anadiv.onmouseout=function(){slayt_zaman=setInterval(slider,5000);}

function slider(){

if(aktif>=document.getElementsByClassName("slayt").length){

aktif=0;

}else if(aktif<0){

aktif=document.getElementsByClassName("slayt").length-1; }

if(pasif!=null){

var pasifdiv=document.getElementsByClassName("slayt")[pasif];

pasifdiv.style.animation="hareketsagsol2 linear 1s";

pasifdiv.style.right="-700px";

}

for(var s=0;s<document.getElementsByTagName("li").length;s++){

document.getElementsByTagName("li")[s].setAttribute("class","");

}

var aktifdiv=document.getElementsByClassName("slayt")[aktif];

aktifdiv.style.animation="hareketsagsol linear 1s";

aktifdiv.style.opacity="1";

aktifdiv.style.right="0px";

document.getElementsByTagName("li")[aktif].setAttribute("class","aktifLi");

pasif=aktif;

aktif++;

}

var slayt_zaman=setInterval(slider,5000);

</script>

DEMO İÇİN TIKLAYINIZ

İlgili

JAVASCRIPT

JAVASCRİPT SLIDER ve ÖRNEK UYGULAMALAR

Hemen Başla

Yorumlar

Yorum Yap

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

JAVASCRİPT SLIDER ve ÖRNEK UYGULAMALAR