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

<!DOCTYPE html>

<html>

<head>

<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>

$(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>

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

</ul>

<h1>Slide 1</h1>

</div>

<h1>Slide 2</h1>

<p>https://alvarotrigo.com/fullPage/examples/autoHeight.html#3rdPage</p>

</div>

<h1>Slide 3</h1>

</div>

</div>

</body>

</html>

aiden666

浏览 1514回答 1

1回答

北七哦

jQuery事件 mouseover

0 0

随时随地看视频慕课网APP