Social Icons

twitterfacebookgoogle pluslinkedinemail

Tuesday 13 August 2013

New slide show with css and javascript



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hacky</title>
</head>
<style>
body
{
padding:0;
margin:0;
}

.main_div

{
position:absolute;
margin-left:10%;
margin-right:10%;
width:80%;
height:500px;
overflow:hidden;
}
.main_div div
{
background-image:url(5.jpg);
background-size:600% 100%;
width:14.28%;
height:500px;
position:absolute;
-moz-transition:all 1s;
}
.first_div
{
background-position:0% 0%;
z-index:6;
opacity:0;
-moz-transform:rotateY(90deg);
}
.second_div
{
background-position:20% 0%;
margin-left:7.14%;
z-index:5;
-moz-transform:rotateY(90deg);
opacity:0;
}
.third_div
{
margin-left:21.43%;
background-position:40% 0%;
z-index:4;
-moz-transform:rotateY(90deg);
opacity:0;
}
.fourth_div
{
margin-left:35.7%;
background-position:60% 0%;
-moz-transform:rotateY(90deg);
opacity:0;
z-index:3;
}
.fifth_div
{
margin-left:49.98%;
background-position:80% 0%;
z-index:2;
-moz-transform:rotateY(90deg);
opacity:0;
}
.sixth_div
{
margin-left:64.26%;
background-position:100% 0%;
z-index:1;
-moz-transform:rotateY(90deg);
opacity:0;
}
</style>
<body>
<div class="main_div">
<div id="1" class="first_div"></div>
<div id="2" class="second_div" ></div>
<div id="3" class="third_div" ></div>
<div id="4" class="fourth_div" ></div>
<div id="5" class="fifth_div" ></div>
<div id="6" class="sixth_div" ></div>
</div>
<script>

 
function div1()
{
document.getElementById("1").style.marginTop="0px";
document.getElementById("1").style.MozTransform="rotateY(0deg)";
document.getElementById("1").style.height="500px";
document.getElementById("1").style.marginLeft="0px";
document.getElementById("1").style.backgroundPosition="0% 0%";
document.getElementById("1").style.opacity="1";
setTimeout("div2()",500);
}
function div2()
{
document.getElementById("2").style.MozTransform="rotateY(0deg)";
document.getElementById("2").style.marginTop="0px";
document.getElementById("2").style.height="500px";
document.getElementById("2").style.marginLeft="14.2857%";
document.getElementById("2").style.backgroundPosition="20% 0%";
document.getElementById("2").style.opacity="1";
setTimeout("div3()",500);
}
function div3()
{
document.getElementById("3").style.MozTransform="rotateY(0deg)";
document.getElementById("3").style.marginTop="0px";
document.getElementById("3").style.marginLeft="28.5714%";
document.getElementById("3").style.height="500px";
document.getElementById("3").style.backgroundPosition="40% 0%";
document.getElementById("3").style.opacity="1";
setTimeout("div4()",500);
}
function div4()
{
document.getElementById("4").style.MozTransform="rotateY(0deg)";
document.getElementById("4").style.marginTop="0px";
document.getElementById("4").style.marginLeft="42.84%";
document.getElementById("4").style.height="500px";
document.getElementById("4").style.backgroundPosition="60% 0%";
document.getElementById("4").style.opacity="1";
setTimeout("div5()",500);
}
function div5()
{
document.getElementById("5").style.MozTransform="rotateY(0deg)";
document.getElementById("5").style.marginTop="0px";
document.getElementById("5").style.marginLeft="57.12%";
document.getElementById("5").style.height="500px";
document.getElementById("5").style.backgroundPosition="80% 0%";
document.getElementById("5").style.opacity="1";
setTimeout("div6()",500);
}
function div6()
{
document.getElementById("6").style.MozTransform="rotateY(0deg)";
document.getElementById("6").style.marginTop="0px";
document.getElementById("6").style.marginLeft="71.4%";
document.getElementById("6").style.height="500px";
document.getElementById("6").style.backgroundPosition="100% 0%";
document.getElementById("6").style.opacity="1";
//setTimeout("div2()",500);
}
setTimeout("div1()",100)
</script>
</body>
</html>
Posted by at
Labels: ,

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )
 

Free Advertisement

Free Advertisement

Free Advertisement

Free Advertisement