轮播图效果实现

轮播图的基本样式代码如下：

	
		
		
			
	
	
		

			

				
				
				
					
			
			<
			>
			

				

				

				

			
		
		
		
	

轮播图思路以及JS代码如下：

/*
	1.获取按钮元素
	2.获取图片元素节点
	3.获取小圆点元素
		图片自动更换动画效果
	4.点击左右按钮实现图片切换的动画效果
	5.动画效果
		获取元素
		目标位置与当前位置的差值
		正值ceil
		负值floor
		每次调动前清除一遍动画
	6.点击小圆点实现图片的切换
	7.图片切换时小圆点样式选中
*/


/*
	封装内容：
		animate   动画函数  animate(移动对象， 偏移位置， 回调函数)
		count    页面计数器
		length   单个页面宽度，即一次位移的偏移量
		leftb    左按钮
		rightb	 右按钮
		lis      小圆点数组
		imgs     图片数组（可选由ul实现）
*/

/*动画函数*/
function animate(box, trapos,callback) {    
	clearInterval(box.move);          /*点击之后消除上一次动画，防止未完成的动画与当前动画发生冲突*/
	box.move = setInterval(function() {
		var left = box.offsetLeft;
		var step = trapos - left;
		step = step > 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
		if( step == 0) {
			clearInterval(box.move);
		}
		box.style.left = left + step + 'px';
	}, 20)
	if(callback) {
		callback();
	}	
}

/*
小圆点被选中函数
count 当前的计数值， lis小圆点列表
*/
function getSelect(count, lis) {
	if(count >= 3) {
		count = 0;
	} else if(count < 0) {
		count = 2;
	}
	for(var i = 0 ;i < lis.length; i++) {
		lis[i].className = '';
	}
	
	lis[count].className = 'select'; 
}

/*轮播图主函数*/
function turnRoundPic(box) {
	/*获取元素节点*/
	var length = 576;
	var count = 0;
	var leftb = box.querySelector('.left');
	var rightb = box.querySelector('.right');
	var lis = box.querySelectorAll('li');
	var imgs = box.querySelector('.imgs');
	/*设置初始定时器----全局变量*/
	fn = setInterval(function() {
	count++;
	if(count > 3) {
		 imgs.style.left = 0 + 'px';
		 count = 1;
	}
		getSelect(count, lis);
		animate(imgs, - length * count);
	}, 3000);
	/*轮播图盒子事件监听
			鼠标放在盒子上，左右箭头按钮出现，自动轮播停止
	*/
	box.addEventListener('mouseenter', function() {
		leftb.style.display = 'block';
		rightb.style.display = 'block';
		clearInterval(fn);
	})
	/*轮播图盒子事件监听
		鼠标离开盒子，左右箭头按钮消失，自动轮播开始
	*/
	box.addEventListener('mouseleave', function() {
		leftb.style.display = 'none';
		rightb.style.display = 'none';
		fn = setInterval(function() {
		count++;
		if(count > 3) {
			 imgs.style.left = 0 + 'px';
			 count = 1;
		}
			getSelect(count, lis);
			animate(imgs, - length * count);
		}, 3000);
	})
	/*左按钮事件，点击查看下一张图片*/
	
	leftb.addEventListener('click', function() {
		clearInterval(fn);
		if(count >= 3) {
			imgs.style.left = 0 + 'px';
			count = 0;
		}
		count ++;
		animate(imgs, -length * count);
		console.log(count);	
		getSelect(count, lis);
	})
	/*右按钮事件，点击查看上一张图片*/
	rightb.addEventListener('click', function() {
		clearInterval(fn);
		if(count <= 0) {
			imgs.style.left = - length * 3 + 'px';
			count = 3;
		}
		count --;
		animate(imgs, -length * count);
		console.log(count);	
		getSelect(count, lis);
	})
	/*点击小圆点，跳转指定图片页面*/
	for(var i = 0; i < lis.length; i++){
		lis[i].setAttribute('index', i);
		lis[i].addEventListener('click', function() {
			clearInterval(fn);
			animate(imgs, - length * this.getAttribute('index'));
			getSelect(this.getAttribute('index'), lis);
		})
	}
}