<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
color:white;
font-weight: bold;
}
.slidebox{
width:500px;
height: 300px;
background-color: pink;
margin: 30px auto 0;
overflow: hidden;
position: relative;
}
.content{
position: absolute;
display: block;
width: 1500px;
height: 300px;
left: 0;
top: 0;
}
.content{
list-style: none;
}
.content li{
float: left;
width: 500px;
height: 300px;
background-color: #00bbee;
}
.select{
display: block;
width: 100%;
height: 30px;
position: absolute;
bottom: 50px;
text-align: center;
list-style: none;
}
.select li{
font-size: 50px;
display: inline-block;
cursor: pointer;
}
.lt{
position: absolute;
left: 20px;
top:135px;
font-size: 30px;
cursor: pointer;
}
.gt{
position: absolute;
right: 20px;
bottom:135px;
font-size: 30px;
cursor: pointer;
}
.select li,.lt,.gt{
opacity: 0.6;
}
.lt:hover,.gt:hover{
opacity: 1;
}
.select li.active{
opacity: 1;
}
</style>
</head>
<body>
<div class="slidebox">
<ul class="content">
<li style="background-color: #00ee00"></li>
<li style="background-color: #95B8E7"></li>
<li style="background-color: goldenrod"></li>
</ul>
<ul class="select">
<li id="li1" class="active">.</li>
<li id="li2">.</li>
<li id="li3">.</li>
</ul>
<a class="lt"><</a>
<a class="gt">></a>
</div>
</body>
<script>
$(function(){
$(".gt").click(function(){
var imgpos=parseInt($(".content").css("left"));
imgpos-=500;
if(imgpos<-1000){imgpos=0}
$(".content").css("left",imgpos);
indexFun();
});
$(".lt").click(function(){
var imgpos=parseInt($(".content").css("left"));
imgpos+=500;
if(imgpos>0){imgpos=-1000}
$(".content").css("left",imgpos);
indexFun();
});
var slideFun=function(){
var imgpos=parseInt($(".content").css("left"));
imgpos-=500;
if(imgpos<-1000){imgpos=0}
$(".content").css("left",imgpos);
indexFun();
};
var indexFun=function(){
var imgpos=parseInt($(".content").css("left"));
if(imgpos==0){
$("#li1").addClass("active").siblings().removeClass("active");
}else if(imgpos==-500){
$("#li2").addClass("active").siblings().removeClass("active");
}else{
$("#li3").addClass("active").siblings().removeClass("active");
}
}
var timer=setInterval(slideFun,1000);
$(".slidebox").hover(
function(){
clearInterval(timer);
},function(){
clearInterval(timer);
timer=setInterval(slideFun,1000);
});
var listbtn=$(".select li");
listbtn.each(function(){
var index=$(this).index();
$(this).hover(function(){
$(this).addClass("active").siblings().removeClass("active");
$(".content").css("left",-index*500);
})
})
})
</script>
</html>
添加回答
举报
0/150
提交
取消