fullpage.js在鼠标经过幻灯片分页器上幻灯片停止左右滚动,鼠标移开幻灯片滚动。这个事件怎么实现效果?

<!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 href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.min.css" 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>鼠标划动</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,//滚动到最低部后是否连续滚动到顶部,默认为false

loopTop: false,//滚动到最顶部后是否连续滚动到底部,默认为false


// setScrollingSpeed:2000, //翻屏滚动速度

slidesNavigation:true,  //轮播翻页器显示

// slidesNavPosition:'top',

loopHorizontal: true,  //轮播图自动滚动

controlArrows:false,  //輪播圖左右箭頭  

//navigation: true,

// navigationPosition: 'right',

// navigationTooltips: ['First page', 'Second page', 'Third and last page'],  //默认导航值

// responsiveWidth: 900,

fixedElements:'.pa1ge',   //固定在頂部不動

fixedElements:'#box',

afterResponsive: function(isResponsive){

}


});

  setInterval(function(){ //自動輪播速度設置

$.fn.fullpage.moveSlideRight();

}, 3000);


});

</script>

</head>

<body>

<ul id="page" class="page">

<li data-menuanchor="page1" class="active"><a href="#page1" title="证券时报网"><span>证券时报网</span></a></li>

<li data-menuanchor="page2"><a href="#page2" title="财苑社区"><span>财苑社区</span></a></li>

<li data-menuanchor="page3"><a href="#page3" title="爱股快信"><span>爱股快信</span></a></li>

<li data-menuanchor="page4"><a href="#page4" title="股票情报"><span>股票情报</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>


aiden666
浏览 1505回答 1
1回答

北七哦

jQuery事件 mouseover
打开App,查看更多内容
随时随地看视频慕课网APP