原生js轮番图

讲到用原生js实现轮番图，就得说道运动。当然直接用定时器，改变ul的left也可以，但是要是想看起来有点动画的效果，出去css的动画实现，如果要用js的话，就得说到运动，下面先来说一下变速运动

function animateBuffer(ele,obj,speedTime,callback){//funciton(){}
		if(speedTime == "slow"){
			speedTime = 100;
		}else if(speedTime == "quickly"){
			speedTime = 50;
		}else if(speedTime == "fast"){
			speedTime = 10;
		}else if(speedTime == undefined){
			speedTime = 20;
		}
		clearInterval(ele.timer);
		ele.timer = setInterval(function(){
			
			var flag = true;//控制所有属性都到目标值。
			
			var current = 0;
			/*
			 * obj = {
					height : "300",
					width : "500",
					opacity : 20
				}
			 */
			for(var attr in obj){
				if(attr == "opacity"){
					current = getStyle(ele,attr)*100;
				}else{
					current = parseInt(getStyle(ele,attr));
				}
				var speed = (obj[attr] - current)/10;
				speed = speed > 0 ?  Math.ceil(speed) : Math.floor(speed);
				
				if(Math.abs(obj[attr]-current) >= speed+0.1){//停止条件处理
					//如果属性还没有到目标值 
					//把flag变成false
					flag = false;
				}
				if(attr == "opacity"){
					current += speed;
					ele.style[attr] = current/100;
				}else if(attr == "zIndex"){
					ele.style[attr] = obj[attr];
				}else{
					ele.style[attr] = current + speed + "px";//
					//console.log(ele.style[attr],target - current,target,current,speed);
				}	
			}
			//当所有的属性都到了目标值后清除定时器
			if(flag){
				ele.style[attr] = obj[attr] + "px";
				clearInterval(ele.timer);
				if(callback){
					callback();
				}
			}	
		},speedTime);
	}
	//跨浏览器获取外部css样式
	function getStyle(ele,attr){
		return window.getComputedStyle ? window.getComputedStyle(ele,false)[attr] : ele.currentStyle[attr];
	}

上面的代码只是实现运动也就是简单动画的效果 .原理也不难，就是县创建一个函数，里面传递参数，要实现动画效果胡元素，要改变胡值，包括宽高等等，还有就是改变值胡速度，回调函数，这里面改变的值需要以对象的形式传递。其他地方可以自己研究，其实就是一些条件的判断以及实现。

接下来是实现轮番图的js代码

<script type="text/javascript">
	var img_list=$id("img-list");
	var bannerli=img_list.children;
	var index=0;
	var timer=null;
	var banner_nav=$id("banner-nav-list");
	var bannerList=banner_nav.children;
	var banner=$id("banner");
	var arr=$id("arr");
	var timer=null;
	var toLeft=$id('toLeft');
	var toRight=$id("toRight");
	timer=setInterval(autoplay,2000);
	function autoplay(){
		if(index>=bannerli.length-1){
			index=1;
			img_list.style.left=0;
		}else {
			index++;
		}
		animateBuffer(img_list,{left:-index*810})
		for(var i=0;i<bannerList.length;i++){
			bannerList[i].className="";
		}
		bannerList[index>bannerList.length-1?0:index].className="active";	
	}
	banner.onmouseover=function(){
		animateBuffer(arr,{opacity:100});
		clearInterval(timer);
	}
	banner.onmouseout=function(){
		timer=setInterval(autoplay,1000);
		animateBuffer(arr,{opacity:0});	
	}
	toLeft.onclick=function(){
		index--;
		if(index<0){
			index=0;
		}
		animateBuffer(img_list,{"left":-index*810});
		for(var i=0;i<bannerList.length;i++){
			bannerList[i].className="";
		}
		bannerList[index>bannerList.length-1?0:index].className="active";
	}
	toRight.onclick=function(){
		index++;
		if(index>bannerList.length-1){
			index=bannerList.length-1;
		}
		animateBuffer(img_list,{"left":-index*810});
		for(var i=0;i<bannerList.length;i++){
			bannerList[i].className="";
		}
		bannerList[index>bannerList.length-1?0:index].className="active";
	}
	for(let i=0;i<bannerList.length;i++){
		bannerList[i].onmouseover=function(){
			bannerList[i].className="";
			index=i-1;
			this.className="active";
			autoplay();
		}
	}
</script>

其实这段的实现也很简单，一步一步来，分部实现就可以

第一步：首先需要让图片能够动起来，那就要改变ul的left值，可以首先定义一个index值为0，然后通过定时器让index增加，同时ul的left值每次都要改变li 的大小乘以index的距离，这个时候要判断index的值，它不能超过li的length-1的长度

第二部：实现鼠标移入移出箭头显示和隐藏，这个可以根据自己写的css样式来改变，可以用display，也可以用opacity

第三步：实现图片右下角的小图片根据大图的移动来移动，这个也可以用index，条件判断处理好就可以了

第四步：实现鼠标移入到小图标上时大图显示相应的图片。

以上是我实现的轮番图，可能会有很多的不足，欢迎大家指！！！

猜你喜欢