Home » Code » 简易图片轮播(四)-单张切换

简易图片轮播(四)-单张切换

接着(三)。到目前为止,似乎可以再做的大文章已经不多,但对于有强迫症的人来说应该还有这么个问题:非连续的图片切换时候速度变快有些耀眼,能不能每次切换都是像下一张那样子只跨越一张图片的距离。其实有了前面的基础,实现起来只需要些许改动:在onmouseover这个事件绑定中,切换开始前,先把目标图片定位到当前图片的“下一张”的位置,自然的切换过去,完成后再把当前图片和图片盒子复原即可,也就是非两端的切换也当两端切换来处理!当然,为了更友好的体验,添加一个是否运动中的判定,一个运动没有完成,新的运动不能产生。

结构不变,只 改动(三)中绑定onmouseover的for循环:

for(var i = 0; i < len; i++){
	buttons[i].index = i;
	buttons[i].onmouseover = function(){
		if(moving){
			return;
		}
		var current = this.index;
		images[current].style.position = "relative";
		if(current > btnIndex){
			images[current].style.left = -(current - (btnIndex + 1)) * oneWidth + 'px';
			moving = true;
			startMove(list, {left:-btnIndex * oneWidth - oneWidth}, 1000, 'ExpoeaseOut', function(){
				images[current].style.position = "static";
				list.style.left = -current * oneWidth + 'px';
				btnIndex = current;
				setBtn();
				imgIndex = current;
				moving = false;
			});

		}else if(this.index < btnIndex){
			images[this.index].style.left = ((btnIndex - 1) - current) * oneWidth + 'px';
			moving = true;
			startMove(list, {left:-btnIndex * oneWidth + oneWidth}, 1000, 'ExpoeaseOut', function(){
				images[current].style.position = "static";
				list.style.left = -current * oneWidth + 'px';
				btnIndex = current;
				setBtn();
				imgIndex = current;
				moving = false;
			});
		}
	}
}

这样子,按钮上任意两张图片的切换,都像是上一张切换下一张般只跨越一张图片的距离。点击下边按钮看看效果:

单张切换demo演示

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.