3回答

好帮手慕星星

2019-09-24

你好，

a标签需要阻止默认跳转，如下：

否则href属性没有值会跳转刷新页面，自己再测试下。

祝学习愉快！

0

海绵弟弟

提问者

2019-09-24

//轮播图
$.fn.UiSlider = function(){

	var ui = $(this);

	var wrap = $('.ui-slider-wrap',ui);

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

	var items  = $('.ui-slider-wrap .item',ui);
	var tips  =$('.ui-slider-process .item',ui);

	//	预定义
	
	var current = 0;
	var size = items.length;
	var width = items.eq(0).width();
	var enableAuto = true;

	//	设置自动滚动感应（如果鼠标在 wrap 中，不要自动滚动）
	ui
	.on('mouseover',function(){
		enableAuto = false;
	})
	.on('mouseout',function(){
		enableAuto = true;
	})


	//	具体操作
	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');

	//	事件
	btn_prev.on('click',function(){
		wrap.triggerHandler('move_prev');
	});
	btn_next.on('click',function(){
		wrap.triggerHandler('move_next');
	});
	tips.on('click',function(){
		var index = $(this).index();
		wrap.triggerHandler('move_to',index);
	})

}

<div class="banner">
		<div class="banner-slider ui-slider">
			<div class="ui-slider-wrap">
				<a href="javascript:;" class="item">
					<img src="img/banner_1.jpg" alt="banner_1">
				</a>
				<a href="javascript:;" class="item">
					<img src="img/banner_2.jpg" alt="banner_1">
				</a>
				<a href="javascript:;" class="item">
					<img src="img/banner_3.jpg" alt="banner_1">
				</a>
			</div>
			<div class="ui-slider-arrow">
				<a href="javascript:;" class="item left">&nbsp;</a>
				<a href="javascript:;" class="item right">&nbsp;</a>
			</div>
			<div class="ui-slider-process">
				<a href="" class="item item_focus">&nbsp;</a>
				<a href="" class="item">&nbsp;</a>
				<a href="" class="item">&nbsp;</a>
			</div>
			
		</div>

老师为什么我的轮播图点小圆点tip的时候不会切换图片？

0

好帮手慕星星

2019-09-23

同学你好。

length是一个属性，不是方法哦，所以不需要加括号。如下修改：

自己测试下，祝学习愉快！

0