Slide Show
by isthebestleonardo
1.Slide Show
home.php
<!Doctype html>
<html>
<head>
<title>Transition 5</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="headImages">
<img class="slides" src="image/gambar1.jpg">
<img class="slides" src="image/gambar2.jpg">
<img class="slides" src="image/gambar3.jpg">
<button class="btn" id="btn1" onclick="transitionSlide(-1)">❮</button>
<button class="btn" id="btn2" onclick="transitionSlide(1)">❯</button>
</div>
</body>
<script>
var index=1;
function transitionSlide(n){
index=index+n;
slideShow(index);
}
slideShow();
function slideShow(n){
var i;
var x=document.getElementsByClassName("slides");
//alert(x.length);//alert("Haiiii");
if(n>x.length){index=1}
if(n<1){index=x.length}
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[index-1].style.display="block";
}
autoSlide()
function autoSlide(){
//alert('dfsad');
var i;
var x=document.getElementsByClassName("slides");
if(index>x.length){index=1}
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[index-1].style.display="block";
index++;
setTimeout(autoSlide,2000);
}
</script>
</html>
style.css
*{
padding:0;
margin:0;
}
#headImages{
width:80%;
height:450px;
border:1px solid red;
margin:0 auto;
margin-top:10px;
position:relative;
}
#headImages img{
width:100%;
height:100%;
position:absolute;
}
.btn{
position:absolute;
width:50px;
height:50px;
border-radius:50px;
border:none;
top:200px;
cursor:pointer;
background:black;
color:white;
font-size:20px;
}
#btn1:hover{
box-shadow:10px 0 20px 0 red;
}
#btn2{
position:relative;
float:right;
}
#btn2:hover{
box-shadow:-10px 0 20px 0 red;
}
1.Slide Show
home.php
<!Doctype html>
<html>
<head>
<title>Transition 5</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="headImages">
<img class="slides" src="image/gambar1.jpg">
<img class="slides" src="image/gambar2.jpg">
<img class="slides" src="image/gambar3.jpg">
<button class="btn" id="btn1" onclick="transitionSlide(-1)">❮</button>
<button class="btn" id="btn2" onclick="transitionSlide(1)">❯</button>
</div>
</body>
<script>
var index=1;
function transitionSlide(n){
index=index+n;
slideShow(index);
}
slideShow();
function slideShow(n){
var i;
var x=document.getElementsByClassName("slides");
//alert(x.length);//alert("Haiiii");
if(n>x.length){index=1}
if(n<1){index=x.length}
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[index-1].style.display="block";
}
autoSlide()
function autoSlide(){
//alert('dfsad');
var i;
var x=document.getElementsByClassName("slides");
if(index>x.length){index=1}
for(i=0;i<x.length;i++){
x[i].style.display="none";
}
x[index-1].style.display="block";
index++;
setTimeout(autoSlide,2000);
}
</script>
</html>
style.css
*{
padding:0;
margin:0;
}
#headImages{
width:80%;
height:450px;
border:1px solid red;
margin:0 auto;
margin-top:10px;
position:relative;
}
#headImages img{
width:100%;
height:100%;
position:absolute;
}
.btn{
position:absolute;
width:50px;
height:50px;
border-radius:50px;
border:none;
top:200px;
cursor:pointer;
background:black;
color:white;
font-size:20px;
}
#btn1:hover{
box-shadow:10px 0 20px 0 red;
}
#btn2{
position:relative;
float:right;
}
#btn2:hover{
box-shadow:-10px 0 20px 0 red;
}
Slide Show
![Slide Show]()
Reviewed by Leo
on
06:58
Rating:
.png)
No comments