<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#mand{
width: 100%;
height: auto;
margin: auto;
}
#pic li{
float: left;
}
#pic{
width: 1200px;
height: 500px;
margin: auto;
position: relative;
overflow: hidden;
}
#pic ul{
width: 3600px;
height: 500px;
position: absolute;
left: -1200px;
z-index: 0;
}
.left{
width: 75px;
height: 500px;
background-color: black;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.right{
width: 75px;
height: 500px;
background-color: black;
position: absolute;
right: 0px;
top: 0px;
}
/*轮播结束*/
#box{
width: 150px;
text-align: right;
position: fixed;
top: 70%;
left: 0px;
}
#pic,#box:hover{cursor: pointer;}/*悬停变手*/
/* 楼层导航*/
#box1{
margin:auto ;
width: 1200px;
height: auto;
}
#box1 li{
width: 1200px;
height: 500px;
margin-top: 30px;
border: 1px solid red;
}
#f-left{
display: none;
text-align: right;
position: fixed;
top: 300px;
width: 150px;
}
#f-left li{
cursor: pointer;
}
.f-color{
color: orange;
}
.f-bgcolor{
background-color: orange;
color: white;
}
/*楼层导航结束*/
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//自动轮播
var pic=$("#pic ul");
function show(){
pic.stop().animate({'margin-left':'-1280'},500,function(){
pic.find("li").eq(0).appendTo(pic);
pic.css({'margin-left':0});
});
}
var i=setInterval(show,3000)
//点击下一章
$(".left").click(function(){
pic.animate({'margin-left':'1280px'},500,function(){
pic.find("li:last").prependTo(pic);
pic.css({'margin-left':0})
})
});
$(".right").click(function(){
show();
})
$("#pic ul").hover(function(){
clearTimeout(i);//悬停暂停播放
},function(){
i=setInterval(show,3000);//离开自动播放
})
//轮播结束
//楼层导航
//定位
$(window).resize(function(){ //浏览器宽高改变触发事件
scrollAlter();
});
function scrollAlter(){ //楼层导航定位
var lefts = document.getElementsByClassName("catalogue_five").offsetLeft;
$("#f-left").css("left",lefts-160);
}
scrollAlter(); //加载完毕执行楼层导航定位事件
$(window).scroll(function(){ //滚动条事件
var topp = $(document).scrollTop();//获取滚动条与顶部的距离
$("#f-left li").each(function(){ //初始化楼层导航li文本
$(this).html($(this).attr("tx")).removeClass("f-color");
})
if(topp<500){
$("#f-left").css({"display":"none"});
}
var topMargin = (topp-500)/520; //通过滚动条与顶部的距离获取所在楼层
if(topMargin>=0){
$("#f-left").css({"display":"block"});
$("#f-left li:eq("+parseInt(topMargin)+")").html($("#f-left li:eq("+parseInt(topMargin)+")").attr("tt")).addClass("f-color");
}
});
var txt;
$("#f-left li").hover(function(){ //楼层导航li悬浮与离开事件
txt = $(this).html();
$(this).html($(this).attr("tt")).addClass("f-bgcolor");
},function(){
$(this).html(txt).removeClass("f-bgcolor");
});
$("#f-left li").click(function(){ //楼层导航li点击事件
txt = $(this).attr("tt");
$("html").animate({scrollTop:$(this).index()*520+500},500);
});
//楼层导航结束
});
</script>
</head>
<body>
<div id="mand">
<div id="pic">
<div class="left"></div>
<ul>
<li><img src="img/5a72d65b9413d.png"/></li>
<li><img src="img/5a72d6ee1c44e.png"/></li>
<li><img src="img/5a72deb6d127d.png"/></li>
</ul>
<div class="right"></div>
</div>
<div id="f-left">
<li tt="1楼" tx="1F">1F</li>
<li tt="2楼" tx="2F">2F</li>
<li tt="3楼" tx="3F">3F</li>
<li tt="4楼" tx="4F">4F</li>
<li tt="5楼" tx="5F">5F</li>
</div>
<div id="box1">
<ul>
<li class="catalogue_five">1</li>
<li class="catalogue_five">2</li>
<li class="catalogue_five">3</li>
<li class="catalogue_five">4</li>
<li class="catalogue_five">5</li>
</ul>
</div>
<div style="height: 500px;">
</div>
</div>
</body>
</html>
