<!doctype html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<style>
*{margin:0;padding:0;list-style:none;}
Body{background:url (img/bg.gif) repeat top left;}
#box {width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;}
#box ul li{opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;}
#box ul Li span{width:150px; height:400px; float:left;}
#box ul. active{opacity:1;}
#box ol{width:100%; height:34px; position:absolute; bottom:20px;}
#box ol li{float:left; width:42px; height:42px; Background:rgba (255,255,255,0.4); Border-radius:50%;font-weight: Bolder margin:0 53px; Cursor:pointer; Position:relative;}
#box ol li span{line-height:34px; text-align:center; background: #8bc2d4; position:absolute; top:4px; left:4px; width : 34px; height:34px; border-radius:50%; Color: #fff; font-size:20px;}
#box ol. active{Background:rgba (124,180,199,0.4);}
#box ol. Active span{color: #8bc2d4; background: #fff;}
</style>
<script src= "Move.js" ></script>
<script>
Window.onload=function () {
var Obox=document.getelementbyid (' box ');
var oul1=obox.getelementsbytagname (' ul ') [0];
var ali1=oul1.getelementsbytagname (' Li ');
var ool1=obox.getelementsbytagname (' ol ') [0];
var ali2=ool1.getelementsbytagname (' Li ');
for (Var i=0;i<ali1.length;i++) {
var apos=[]
var aspan=ali1[i].getelementsbytagname (' span ');
for (Var j=0;j<aspan.length;j++) {
Apos[j]={left:aspan[j].offsetleft,top:aspan[j].offsettop};
aspan[j].style.left=apos[j].left+ ' px ';
if (j%2==0) {
Aspan[j].style.top=0;
}else{
aspan[j].style.bottom=0;
}
}
for (Var j=0;j<aspan.length;j++) {
aspan[j].style.position= ' absolute ';
Aspan[j].style.background= ' url (img/' + (i+1) + '. jpg) ';
aspan[j].style.backgroundposition= '-' +j*150+ ' px 0 ';
aspan[j].style.margin=0;
aspan[j].style.height=0;
}
}
for (Var i=0;i<ali2.length;i++) {
(function (index) {
Ali2[i].onclick=function () {
tab (index);
};
}) (i);
}
Function tab (index) {
for (Var i=0;i<ali2.length;i++) {
Ali2[i].classname= ";
ali1[i].style.opacity=0;
var aspan=ali1[i].getelementsbytagname (' span ');
for (Var j=0;j<aspan.length;j++) {
aspan[j].style.height=0;
}
}
Ali2[index].classname= ' active ';
Ali1[index].style.opacity=1;
var aspan=ali1[index].getelementsbytagname (' span ');
for (Var j=0;j<aspan.length;j++) {
Move (aspan[j],{height:400});
}
}
};
</script>
<body>
<div id= "box" >
<ul>
<li class= "Active" style= "Background:url (img/4.jpg) no-repeat;" ><span></span><span></span><span></span><span></span></ Li>
<li style= "Background:url (img/1.jpg) no-repeat;" ><span></span><span></span><span></span><span></span></ Li>
<li style= "Background:url (img/2.jpg) no-repeat;" ><span></span><span></span><span></span><span></span></ Li>
<li style= "Background:url (img/3.jpg) no-repeat;" ><span></span><span></span><span></span><span></span></ Li>
</ul>
<ol>
<li class= "Active" ><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ol>
</div>
</body>
Use JS to write the blinds 3