css3单页滚动右侧圆点索引效果|纵向滚屏翻页

css3单页滚动右侧圆点索引效果|纵向滚屏翻页2077
点右边的按钮,底部的按钮,滚动鼠标滚轮,按下键盘方向上下键查看效果
$(function(){
		var btn_index=0;
		/*右边按钮点击*/
		$('.section-btn li').each(function(index) {
			$(this).click(function(){
				btn_index=index;
				scroller();
			})
		});
		/*翻页按钮点击*/
		$('.go-btn').one('click',btn_go);
		function btn_go(){
			go_up();scroller();	
			setTimeout(function(){$('.go-btn').one('click',btn_go)},1000)
		};
		/*响应鼠标*/
		$('.section-wrap').one('mousewheel',mouse_);
		function mouse_(event){
			if (event.deltaY<0) {go_up()}
			else{go_down()}
			scroller();
			setTimeout(function(){$('.section-wrap').one('mousewheel',mouse_)},1000)
		};
		
		/*当前页面赋值*/
		function go_up(){btn_index++;if(btn_index==$('.section-btn li').length){btn_index=$('.section-btn li').length-1};}
		function go_down(){btn_index--;if(btn_index<0){btn_index=0};}
		
		/*页面滑动*/
		function scroller(){
			$('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');	
			$('.section-wrap').attr("class","section-wrap").addClass(function() {
					return "put-section-"+btn_index;
			 }).find('.section').eq(btn_index).find('.title').addClass('active');
		};
		
		/*响应键盘上下键*/
		$(document).one('keydown',keyaction);
		function keyaction(event){
			var e=event||window.event;
			var key=e.keyCode||e.which||e.charCode;
			switch(key)	{
				case 38: go_down();scroller();	
				break;
				case 40: go_up();scroller();	
				break;
			};
			setTimeout(function(){$(document).one('keydown',keyaction)},1000)
		}
		
		
	})

也许你还喜欢