$(function() {
	let i = 0;
	let len = $('.banner>ul>li').length;
	let t; //用let声明变量时,可只声明不赋值
	//1.点击向右的按钮，图片切换至下一张
	$('.right').click(function() {
		i++;
		if (i == len) {
			i = 0;
		}
		//效果：图片切换至下一张
		showPic();
	});
	
	//2.点击向左的按钮，图片切换至上一张
	$('.left').click(function() {
		i--;
		if (i == -1) {
			i = len - 1;
		}
		//效果：图片切换至下一张
		showPic();
	});
	//3.点击圆点,切换banner图
	$('.num>ul>li').click(function(){
		let num = $(this).index();//获取当前li的索引号
		$('.banner>ul>li').eq(num).stop().fadeIn(500).siblings('.banner>ul>li').stop().fadeOut(500);
		$('.num>ul>li').eq(num).addClass('show').siblings('.num>ul>li').removeClass('show');
	});
	
	//4.自动轮播效果
	//当鼠标经过banner时，停止轮播，鼠标离开时，继续轮播
	$('.banner').hover(function() {
		//当鼠标经过banner，停止播放：
		clearInterval(t);
	}, function() {
		//鼠标离开时，自动轮播
		t = setInterval(function() {
			i++;
			if (i == len) {
				i = 0;
			}
			//效果：图片切换至下一张
			showPic();
		}, 2000);
	});
	function showPic() {
		$('.banner>ul>li').eq(i).stop().fadeIn(500).siblings('.banner>ul>li').stop().fadeOut(500);
		$('.num>ul>li').eq(i).addClass('show').siblings('.num>ul>li').removeClass('show');
	}
});
