这是一个轮播图,浏览器窗口缩小,右边会顶出来一大块空白区域,求大神给看一下是否样式出了问题

wdsjndtk 发布于 2016/08/04 21:20
阅读 713
收藏 1

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
<title></title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/lb.js" type="text/javascript"></script>
<link href="css/lb.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="lb">
<div class="lb_img">
<ul>
<li><img src="images/banner01.png"></li>
<li><img src="images/banner02.png"></li>
<li><img src="images/banner03.png"></li>
<li><img src="images/banner04.png"></li>
<li><img src="images/banner05.png"></li>
<li><img src="images/banner06.png"></li>
</ul>
</div>
<div class="btn btn1"><</div><div class="btn btn2">></div>
<div class="tabs">
<ul>
<li class="tab1 bg">1</li>
<li class="tab1">2</li>
<li class="tab1">3</li>
<li class="tab1">4</li>
<li class="tab1">5</li>
<li class="tab1">6</li>
</ul>
</div>
</div>
</body>
</html>


css代码

*{
margin: 0px;
padding: 0px;
}
body
{
   position: absolute;
    width: 100%;
}
#lb{
width: 1030px;
height: 490px;
margin: 0 auto;
position: relative;
}
.lb_img ul li{
position: absolute;
list-style-type: none;
}
.btn{
position: absolute;
width: 60px;
height: 90px; 
background-color: rgba(0,0,0,0.5);
font-size: 40px;
color: #ffffff;
line-height: 90px;
text-align: center;
top: 200px;
cursor: pointer;
display: block;
}
.btn2{
left: 970px;
top: 200px;
display: block;
}


.tabs{
position: relative;
left: 430px;
top: 265px;
}


.tabs ul li{
float: left;
list-style-type: none;
background-color: red;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center; 
margin-right: 10px;
color: #ffffff;
border-radius: 100%; 
cursor: pointer;
}
.tabs ul li.bg{
background-color: #ffffff;
color: #000000; 
}

js代码



var i = 0;
var timer;
$(function(){
$(".lb_img ul li").eq(0).show().siblings().hide();
ShowTimer();
$(".tab1").hover(function(){
i = $(this).index();
Show();
clearInterval();
},function(){
ShowTimer();
});
$(".btn1").click(function(){
clearInterval(timer);
if(i==0){
i=6;
}
i--;
Show();
ShowTimer();
});
$(".btn2").click(function(){
clearInterval(timer);
if(i==5){
i=-1;
}
i++;
Show();
ShowTimer();
});
});


function Show(){
$(".lb_img ul li").eq(i).fadeIn(300).siblings().fadeOut(300); 
$(".tab1").eq(i).addClass("bg").siblings().removeClass("bg");
};


function ShowTimer(){
timer=setInterval(function(){
i++;
if(i==6){
i=0;
}
Show();
},4000);
};


加载中
0
水无月青云
水无月青云
使用 百分比 或者 单位em
返回顶部
顶部