使用fullPage做的大图片全屏滚动

本地的图片和css等文件

创新互联建站专业为企业提供吉州网站建设、吉州做网站、吉州网站设计、吉州网站制作等企业网站建设、网页设计与制作、吉州企业网站模板建站服务，10年吉州做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullPage.js — 背景演示_dowebok</title>

<!--网页的链接css <link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css"> -->

<link rel="stylesheet" href="css/jquery.fullPage.css">

<style>

.section1 { background: url(picuter/1.jpg) 50%;}

.slide{ background: url(picuter/statics-topic-pi-assets-img-panel4_bg3.jpg) 50%;}

.section3 { background: url(picuter/statics-topic-pi-assets-img-panel3_bg3.jpg) 50%;}

.section4 { background: url(picuter/statics-topic-pi-assets-img-panel4_bg1.jpg) 50%;}

</style>

<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

<!-- <script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script> -->

<script src="script/jquery.fullPage.min.js"></script>

<script>

$(function(){

$('#dowebok').fullpage();

setInterval(function(){

        $.fn.fullpage.moveSlideRight();  //自动向右滚动

    }, 3000);

});

/* function xian(){            moveSectionDown()向下滚动

  alert({}+'a'<{}+'b');

} */

</script>

</head>

<body>

<div id="dowebok">

<div class="section section1"><center>仙哥的天堂</center></div>

<div class="section section2">

   <div class="slide"></div>

        <div class="slide"><img src="picuter/statics-topic-pi-assets-img-panel3_bg1.jpg"></img></div>

        <div class="slide"><img src="picuter/statics-topic-pi-assets-img-panel3_bg2.jpg"></img></div>

</div>

<div class="section section3"></div>

<div class="section section4"></div>

</div>

<a href="http://www.dowebok.com/" >dowebok</a>

<a href="http://www.dowebok.com/77.html" >jQuery全屏滚动插件fullPage.js</a>

<script src="http://hm.baidu.com/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>

</body>

</html>

网络的css和图片等文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<title>fullPage.js — 背景演示_dowebok</title>

<link rel="stylesheet" href="http://cdn.dowebok.com/77/css/jquery.fullPage.css">

<style>

.section1 { background: url(http://www.taofoot.com/1.jpg) 50%;}

.slide{ background: url(/upload/otherpic52/213631.jpg) 50%;}

.section3 { background: url(/upload/otherpic52/213632.jpg) 50%;}

.section4 { background: url(/upload/otherpic52/213633.jpg) 50%;}

</style>

<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>

<script src="http://cdn.dowebok.com/77/js/jquery.fullPage.min.js"></script>

<script>

$(function(){

$('#dowebok').fullpage();

});

</script>

</head>

<body>

<div id="dowebok">

<div class="section section1"><center>仙哥的天堂</center></div>

<div class="section section2">

   <div class="slide"></div>

        <div class="slide"><img src="/upload/otherpic52/213634.jpg"></img></div>

        <div class="slide"><img src="/upload/otherpic52/213635.jpg"></img></div>

</div>

<div class="section section3"></div>

<div class="section section4"></div>

</div>

<a href="http://www.dowebok.com/" >dowebok</a>

<a href="http://www.dowebok.com/77.html" >jQuery全屏滚动插件fullPage.js</a>

<script src="http://hm.baidu.com/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>

</body>

</html>

附件：http://down.51cto.com/data/2365483

分享标题：使用fullPage做的大图片全屏滚动
地址分享：https://www.cdcxhl.com/article0/gssioo.html

成都网站建设公司_创新互联，为您提供Google、网站维护、外贸建站、虚拟主机、网站策划、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站建设网站维护公司

解决方案知识

同城分类信息