<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /><link type="text/css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script><!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>--><script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.js"></script> <title>鼠標(biāo)劃動(dòng)</title><style> * {margin:0; padding:0; } body {background-color:#333;} .initBody {height:100%; overflow:hidden; position: relative; z-index:100;} ul,li {list-style:none;} a {text-decoration:none; color:red;} .section {background-color:#f1f1f1; font-size: 100px; line-height:200px; text-align: center;} .section_1 {background-color:red} .section_2 {background-color:blue} .section_3 {background-color:green}/* .page {width:15px; position: fixed; right:20px; top:0; color:#fff; z-index: 999;} .page li a {display:block; } .page li span{display:block; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,.5); background-color: #fff; text-indent:-9999em; margin-top: 5px; cursor: pointer;} .page li.active span {border:1px solid #fff; width:13px; height:13px; background:blue;}*/ .page { position: fixed; right: 20px; top: 40%; z-index: 10; list-style-type: none; } .page li { width: 90px; height: 27px; margin-top: 7px; overflow: hidden;} .page a { display: block; height: 27px; padding-right: 30px; line-height: 27px;/*background:rgba(255,255,255,.5);*/background: url(public/images/dot.png) right -34px no-repeat; color: #fff; text-align: right; text-shadow: 1px 1px 0px #333; text-decoration: none; overflow: hidden;} .page span { display: block; width: 60px; height: 27px; font-size: 12px; text-indent: 200px; opacity: 0.6; filter:alpha(opacity=60); overflow: hidden;} .page a:hover span { text-indent: 0;} .page .active a { background-position: right 0;} .wheel {background-color:#336699;} .wrapper {overflow: hidden;} #box{position: fixed; right:50%; top:0; color:#fff; z-index: 999;font-size: 100px; }</style> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['page1', 'page2', 'page3', 'page4', 'page5'], sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C','#C63D0F', '#1BBC9B', '#7E8F7C'], menu: '.page', loopBottom: false,//滾動(dòng)到最低部后是否連續(xù)滾動(dòng)到頂部，默認(rèn)為false loopTop: false,//滾動(dòng)到最頂部后是否連續(xù)滾動(dòng)到底部，默認(rèn)為false // setScrollingSpeed:2000, //翻屏滾動(dòng)速度 slidesNavigation:true,? //輪播翻頁器顯示 // slidesNavPosition:'top', loopHorizontal: true,? //輪播圖自動(dòng)滾動(dòng) controlArrows:false,? //輪播圖左右箭頭?? //navigation: true,// navigationPosition: 'right',// navigationTooltips: ['First page', 'Second page', 'Third and last page'],? //默認(rèn)導(dǎo)航值// responsiveWidth: 900, fixedElements:'.pa1ge',? ?//固定在頂部不動(dòng) fixedElements:'#box', afterResponsive: function(isResponsive){ } }); ? setInterval(function(){ //自動(dòng)輪播速度設(shè)置 $.fn.fullpage.moveSlideRight(); }, 3000); }); </script></head><body><ul id="page" class="page"> <li data-menuanchor="page1" class="active"><a href="#page1" title="證券時(shí)報(bào)網(wǎng)"><span>證券時(shí)報(bào)網(wǎng)</span></a></li> <li data-menuanchor="page2"><a href="#page2" title="財(cái)苑社區(qū)"><span>財(cái)苑社區(qū)</span></a></li> <li data-menuanchor="page3"><a href="#page3" title="愛股快信"><span>愛股快信</span></a></li> <li data-menuanchor="page4"><a href="#page4" title="股票情報(bào)"><span>股票情報(bào)</span></a></li> <li data-menuanchor="page5"><a href="#page5" title="新股助手"><span>新股助手</span></a></li></ul><div id="box">555555555555</div><div id="fullpage"> <div class="section"> <div class="slide"> <h1>Slide 1</h1> </div> <div class="slide"> <h1>Slide 2</h1> <p>https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage</p> </div> <div class="slide"> <h1>Slide 3</h1> </div> </div> <div class="section">視圖二</div> <div class="section">視圖三</div> <div class="section">視圖四</div> <div class="section">視圖五</div> <div class="section fp-auto-height">視圖六</div> </div> </body></html>
fullpage.js在鼠標(biāo)經(jīng)過幻燈片分頁器上幻燈片停止左右滾動(dòng)，鼠標(biāo)移開幻燈片滾動(dòng)。這個(gè)事件怎么實(shí)現(xiàn)效果？
aiden666
2018-03-27 14:18:07
