轮播图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 1000px;
height: 500px;
overflow: hidden;
margin: 150px auto;
position: relative;
}
#ul{
width: 5000px;
position: absolute;
}
#ul img{
width: 1000px;
height: 500px;
}
li{
list-style-type: none;
float: left;
}
#left,#right{
width: 100px;
height: 100px;
font-size: 50px;
font-weight: bold;
color: black;
position: absolute;
opacity: 0.1;
border-radius: 50px;
display: none;
}
#left{
left: 50px;
top: 200px;
}
#right{
right: 50px;
top: 200px;
}
#foot{
width: 200px;
height: 50px;
position: absolute;
top: 450px;
left: 400px;
}
#foot button{
width: 30px;
height: 30px;
margin-left: 10px;
border: 0;
border-radius: 15px;
opacity: 0.5;
}
</style>
<script type="text/javascript">
var s = 0;
var v = -10;
var flag=true,flag2=true;
var ul,btns,btn1,btn2,btn3,btn4,foot,left,right;
var intval;
var time1,time2;
window.onload=function(){
ul = document.getElementById("ul");
main = document.getElementById("main");
btns=document.getElementsByTagName("button");
btn1 = document.getElementById("btn1");
btn1.style.backgroundColor="red";
btn2 = document.getElementById("btn2");
btn3 = document.getElementById("btn3");
btn4 = document.getElementById("btn4");
left = document.getElementById("left");
right = document.getElementById("right");
left.onmouseover=function(){
flag=false;
left.style.opacity=0.5;
}
left.onmouseout=function(){
left.style.opacity=0.1;
}
left.onclick=function(){
flag=false;
var sValue=Math.floor(Math.abs(s)/1000);
if(sValue==0){
s=-3000;
ul.style.left=s+"px";
}else if(sValue==1){
s=-0;
ul.style.left=s+"px";
}
else if(sValue==2){
s=-1000;
ul.style.left=s+"px";
}
else if(sValue==3){
s=-2000;
ul.style.left=s+"px";
}
setColor2();
}
right.onclick=function(){
flag=false;
var sValue=Math.floor(Math.abs(s)/1000);
if(sValue==0){
s=-1000;
ul.style.left=s+"px";
}else if(sValue==1){
s=-2000;
ul.style.left=s+"px";
}
else if(sValue==2){
s=-3000;
ul.style.left=s+"px";
}
else if(sValue==3){
s=-0;
ul.style.left=s+"px";
}
setColor();
}
right.onmouseover=function(){
flag=false;
right.style.opacity=0.5;
}
right.onmouseout=function(){
right.style.opacity=0.1;
}
main.onmouseover=function(){
left.style.display="block";
right.style.display="block";
}
main.onmouseout=function(){
left.style.display="none";
right.style.display="none";
}
// ul.onclick=function(even){
// var ev = even||window.event;
// var e = ev.srcElement||ev.target;
// s= -1000*parseInt(e.getAttribute("value"));
// ul.style.left=s+"px";
// }
foot = document.getElementById("foot");
foot.onclick=function(even){
var ev = even||window.event;
var e = ev.srcElement||ev.target;
if(e.value!=null){
for(var n=0;n<btns.length;n++){
btns[n].style.backgroundColor="white";
}
e.style.backgroundColor="red";
flag=false;
s= (parseInt(e.value)-1)*-1000;
ul.style.left=s+"px";
}
}
foot.onmouseover=function(){
flag=false;
}
foot.onmouseout=function(){
flag=true;
}
intval = setInterval(intv,30);
ul.onmouseover=function(even){
flag=false;
var ev = even||window.event;
var e = ev.srcElement||ev.target;
s= -1000*parseInt(e.getAttribute("value"));
ul.style.left=s+"px";
}
ul.onmouseout=function(){
flag=true;
}
}
function intv(){
if(flag){
s+=v;
if(s==-4000){
s=0;
}
ul.style.left=s+"px";
setColor();
if(s%1000==0){
flag=false;
setTimeout(function(){
flag=true;
},1000);
}
}
}
function setColor(){
var value=Math.floor(Math.abs(s)/1000);
if(value==0){
btn4.style.backgroundColor="white";
btn1.style.backgroundColor="red";
}else if(value==1){
btn1.style.backgroundColor="white";
btn2.style.backgroundColor="red";
}else if(value==2){
btn2.style.backgroundColor="white";
btn3.style.backgroundColor="red";
}else if(value==3){
btn3.style.backgroundColor="white";
btn4.style.backgroundColor="red";
}
}
function setColor2(){
var value=Math.floor(Math.abs(s)/1000);
if(value==0){
btn2.style.backgroundColor="white";
btn1.style.backgroundColor="red";
}else if(value==1){
btn3.style.backgroundColor="white";
btn2.style.backgroundColor="red";
}else if(value==2){
btn4.style.backgroundColor="white";
btn3.style.backgroundColor="red";
}else if(value==3){
btn1.style.backgroundColor="white";
btn4.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="main" class="main">
<ul id="ul">
<li id="li1"><a><img value="0" id="img1" src="1.jpg" alt="图片"/></a></li>
<li id="li2"><a><img value="1" id="img2" src="2.jpg" alt="图片"/></a></li>
<li id="li3"><a><img value="2" id="img3" src="3.jpg" alt="图片"/></a></li>
<li id="li4"><a><img value="3" id="img4" src="4.jpg" alt="图片"/></a></li>
<li id="li5"><a><img value="0" id="img5" src="1.jpg" alt="图片"/></a></li>
</ul>
<button id="left"><</button>
<button id="right">></button>
<div id="foot">
<button value="1" id="btn1">1</button>
<button value="2" id="btn2">2</button>
<button value="3" id="btn3">3</button>
<button value="4" id="btn4">4</button>
</div>
</div>
</body>
</html>
