fullpage中在slide里加个DIV ,怎样可以在每一页都有这个DIV
想了好多种办法,调了一天了,都不行,所以来求助大神们,
我的思路:回调函数 加载时+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>
Furyyy浏览 2311回答 2
2回答
-
Furyyy
没人吗... -
Furyyy
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; }
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery