想了好多种办法,调了一天了,都不行,所以来求助大神们,我的思路:回调函数 加载时+1920px,(用的move.js里的add语句)离开时判断如果是回到前面的页面,就-1920px,但是不成功,只能加载时增加PX,离开时不能减少,不知道为什么.最后还是决定用move.js里的set语句,但是不知道为什么死活就是运行不出来效果,求大神帮忙看看,谢谢!!! 附代码:HTML:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meat name="viewport" content="widt=device-width, initial-scale=1,user-scalable=no/">
<title>traval</title>
<link rel="stylesheet" href="jquery.fullPage.css" />
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="fullpage">
<div class="section section1">
<h1>TRAVAL </h1>
<p></p>
<a href="#"></a>
</div>
<div class="section section2">
<div class="slide sectionslide">
<img src="sucai/bingdao/1.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/2.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/3.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/4.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/5.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/6.jpg">
</div>
<div class="slide sectionslide">
<img src="sucai/bingdao/7.jpg">
<div class="information">123123</div>
</div>
</div>
</div>
<script src="move.js"></script>
<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#fullpage').fullpage({
verticalCentered:false,
anchors:["page1","page2","page3","page4"],
navigation:true,
navigationTooltips:["1","2","3","4"],
paddingTop:60,
afterSlideLoad:function(link,index,slideAnchor,slideIndex){
switch(slideIndex){
case 1:
move(".information").set("margin-left",3370).end();
break;
case 2:
move(".information").set("margin-left",5290).end();
break;
case 3:
move(".information").set("margin-left",7210).end();
break;
case 4:
move(".information").set("margin-left",9130).end();
break;
case 5:
move(".information").set("margin-left",11050).end();
break;
case 6:
move(".information").set("margin-left",12970).end();
break;
default:
break;}},
});
});
</script>
</body>
</html>
2 回答
Furyyy
TA贡献4条经验 获得超0个赞
style.css:(有关部分)
.section2{
position: relative;
background-color: #2b2b2b;
background-size: 100%;
}
.information{
background-color:#0F0F0F;
opacity: 0.8;
width: 320px;
height: 880px;
display:inline-block;
position: absolute;
left:1450px;
top: 1px;
}
.sectionslide img{
width: 1920px;
height: 880px;
position: relative;
left: 0px;
}
添加回答
举报
0/150
提交
取消