<!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 div{width:300px; height:400px; float:left;}
#box ul Li span{width:150px; height:400px; float:left;}
#box ul Li right{float:right;}
#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 aspan=ali1[i].getelementsbytagname (' span ');
for (Var j=0;j<aspan.length;j++) {
Aspan[j].style.background= ' url (img/' + (i+1) + '. jpg) ';
aspan[j].style.backgroundposition= '-' +j*150+ ' px 0 ';
aspan[j].style.width=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++) {
var aspan=ali1[i].getelementsbytagname (' span ');
ali1[i].style.opacity=0;
Ali2[i].classname= ";
for (Var j=0;j<aspan.length;j++) {
aspan[j].style.width=0;
}
}
Ali2[index].classname= ' active ';
Ali1[index].style.opacity=1;
var aspan=ali1[index].getelementsbytagname (' span ');
for (Var i=0;i<aspan.length;i++) {
Move (aspan[i],{width:150});
}
}
};
</script>
<body>
<div id= "box" >
<ul>
<li class= "Active" style= "Background:url (img/4.jpg) no-repeat;" ><div><span></span><span class= "right" ></span></div><div><span ></span><span class= "right" ></span></div></li>
<li style= "Background:url (img/1.jpg) no-repeat;" ><div><span></span><span class= "right" ></span></div><div><span ></span><span class= "right" ></span></div></li>
<li style= "Background:url (img/2.jpg) no-repeat;" ><div><span></span><span class= "right" ></span></div><div><span ></span><span class= "right" ></span></div></li>
<li style= "Background:url (img/3.jpg) no-repeat;" ><div><span></span><span class= "right" ></span></div><div><span ></span><span class= "right" ></span></div></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 2