溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用fullPage做的大圖片全屏滾動(dòng)

發(fā)布時(shí)間：2020-07-21 12:38:28 來(lái)源：網(wǎng)絡(luò) 閱讀：2315 作者：jiazhipeng12 欄目：web開(kāi)發(fā)

本地的圖片和css等文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

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

<!--網(wǎng)頁(yè)的鏈接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();  //自動(dòng)向右滾動(dòng)

    }, 3000);

});

/* function xian(){            moveSectionDown()向下滾動(dòng)

  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 >dowebok</a>

<a >jQuery全屏滾動(dòng)插件fullPage.js</a>

<script src="http://#/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>

</body>

</html>




網(wǎng)絡(luò)的css和圖片等文件



<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" >

<style>

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

.slide{ background: url(https://cache.yisu.com/upload/information/20200311/55/213631.jpg) 50%;}

.section3 { background: url(https://cache.yisu.com/upload/information/20200311/55/213632.jpg) 50%;}

.section4 { background: url(https://cache.yisu.com/upload/information/20200311/55/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="https://cache.yisu.com/upload/information/20200311/55/213634.jpg"></img></div>

        <div class="slide"><img src="https://cache.yisu.com/upload/information/20200311/55/213635.jpg"></img></div>

</div>

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

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

</div>

<a >dowebok</a>

<a >jQuery全屏滾動(dòng)插件fullPage.js</a>

<script src="http://#/h.js?988268596e7a833ffbfb2e9f82d93e18"></script>


</body>

</html>



附件：http://down.51cto.com/data/2365483
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手