1回答

樱桃小胖子

2017-09-04

已采纳

//ui-slider
/*
* 1.左右箭头需要能控制翻页
* 2.翻页的时候，进度点，要联动进行focus
* 3.反到第三页的时候，下一页需要回到 第一页，翻到第一页的时候，同理
* 4.进度点，再点击的时候，需要切换到对应的页面
* 5.没有（进度点点击、翻页操作）的时候需要进行自动滚动
* 6.滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击）
*/
$.fn.UiSlider = function(){
	// var ui = $(this);
	// var wrap = $('ui-slider-wrap');
	var wrap =  $('.ui-slider-wrap',this);
	var size = $('.item',wrap).size()-1;

	// var btn_prev = $('.ui-slider-arrow .left',ui);
	// var btn_next = $('.ui-slider-arrow .right',ui);
	var goPrev = $('.ui-slider-arrow .left',this);
	var goNext = $('.ui-slider-arrow .right',this);

	// var items = $('.ui-slider-wrap .item',ui);
	// var tips = $('.ui-slider-process .item',ui);
	var items = $('.item',wrap);
	var tips  = $('.ui-slider-process .item',this);
	var width =  items.eq(0).width();

	var currentIndex = 0;
	var autoMove = true;

	// 预定义
	// var current = 0;
	// var size = items.size();
	// var width = items.eq(0).width();
	// var enableAuto = true;
	//设置自动滚动感应（如果鼠标再wrap中，不要自动滚动）
	// ui
	// .on('mouseover',function(){
	// 	enableAuto = false;
	// })
	// .on('mouseout',function(){
	// 	enableAuto = true;
	// })
	wrap
	.on('resetFocus',function(evt,isAutoMove){
		tips.removeClass('item_focus').eq(currentIndex).addClass('item_focus');
		wrap.animate({left:currentIndex*width*-1});
	})
	.on('nextFocus',function(){

		currentIndex = currentIndex+1 > size ? 0 : currentIndex+1;
		$(this).triggerHandler('resetFocus');

		// 4. 链式调用
		return $(this);

	})
	//具体操作
	// wrap
	// .on('move_prev',function(){
	// 	if(current<=0){
	// 		current = size;
	// 	}
	// 	current = current-1;
	// 	wrap.triggerHandler('move_to',current);
	// })
	// .on('move_next',function(){
	// 	if(current>=size-1){
	// 		current = -1;
	// 	}
	// 	current = current+1;
	// 	wrap.triggerHandler('move_to',current);
	// })
	// .on('move_to',function(evt,index){
	// 	wrap.css('left',index*width*-1);
	// 	tips.removeClass('item_focus').eq(index).addClass('item_focus');
	// })
	// .on('auto_move',function(){
	// 	setInterval(function(){
	// 		enableAuto && wrap.triggerHandler('move_next');
	// 	},2000);
	// })
	// .triggerHandler('auto_move');
	.on('prevFocus',function(){
		currentIndex = currentIndex-1 < 0 ? size : currentIndex-1;
		$(this).triggerHandler('resetFocus');

	})
	.on('autoMove',function(){
		// 2. 自动处理
		if(autoMove == true){
			setTimeout(function(){
				// 3. 闭包 && 链式调用
				wrap.triggerHandler('nextFocus').triggerHandler('autoMove');
			},1000);
		}
	}).triggerHandler('autoMove');

	//事件
	goPrev.on('click',function(){
		wrap.triggerHandler('prevFocus');
		return false;
	});
	goNext.on('click',function(){
		wrap.triggerHandler('nextFocus');
		return false;
	});
}

根据你的代码进行了调整，建议对比着来看一下，并且建议回顾一下课程，老师有详细讲解哦！

0

h233xxxxx

h 非常感谢！

h017-09-06

共1条回复