无缝滚动与间歇性无缝滚动

1.横向无缝滚动

html结构：

这里banner-container为可视区域，给一个固定宽度值，并设置为overflow:hidden。banner_wrap的宽度尽量宽一些，要能放下两个img_wrap的宽度，然后复制一份img_wrap，并插入到banner_wrap内。通过banner_wrap的left值的变化实现滚动的效果

js代码：

//无缝滚动函数
function slide() {
	//克隆一份复制体并插入
	$('.img_wrap').clone().appendTo($('.banner_wrap'));
	//可视区域offsetleft值
	var container_left=$('.banner-container').offset().left;
	//复制体
	var $img_wrap2=$('.img_wrap').eq(1);
	//复制份的offsetLeft值
	var wrap_left;
	//移动层
	var $banner_wrap=$('.banner_wrap');
	//banner_wrap的left值
	var banner_left;
	//定时器
	var timer;
	function move() {
		wrap_left= $img_wrap2.offset().left;
		//判断复制份的offsetLeft值等于可视区域offsetLeft值，就将移动层的left设置为0px;
		if (container_left>=wrap_left) {
			$banner_wrap.css('left','0px');
		}
		
		banner_left=parseInt($banner_wrap.css('left'));
		banner_left--;
		$banner_wrap.css('left',banner_left+'px');
		//重复执行
		timer=setTimeout(move,30);
	}
	move();
}

这里我使用了settimeout定时器，也可以使用setinterval定时器。

2.纵向间歇性滚动

html结构：

	

		

			
好说歹说大红色的合适的话。
			
好说歹说大红色的合适的话。
			
好说歹说大红色的合适的话。
			
好说歹说大红色的合适的话。
			
好说歹说大红色的合适的话。
			
好说歹说大红色的合适的话。
	        
	

这里和上面的结构原理是一样的。

js代码：

//纵向间接性无缝滚动
function slide1() {
	//克隆一份
	$('.slide_ul').clone().appendTo($('.slide_wrap'));
	
	var slide_li_top=$('.slide_li').offset().top;//可视区域offsettop值
	
	var slide_wrap=$('.slide_wrap');//包裹层，也就是移动层

	var slide_wrap_top;//包裹层的offsetTop值
	
	var slide_ul2=$('.slide_ul').eq(1);//复制体
	
	var slide_ul2_top;//复制体的offsetTop
	
	var timer1;//移动用的定时器1；
	
	var timer2;//控制间歇时间的定时器2
	function move1() {
		timer1=setInterval(function () {
			//获取复制体的offsettop
			slide_ul2_top=slide_ul2.offset().top;

			//判断复制体的offsettop等于可视区域(也就是slide_li)的offsettop
			//若两个值相等，就将slide_wrap的top值变为0;
			if (slide_ul2_top<=slide_li_top) {
				slide_wrap.css('top','0px');
			}

			// li的高度为30px;
			//判断包裹层每移动30px(也就是li的高度);就将timer1清除，并设置timer2，延迟1秒后执行move1;
			if (slide_wrap_top%30==0) {
				clearInterval(timer1);
				timer2=setTimeout(move1,1000);
			}
			//定时器每次执行都获取移动层的top值，并减1。然后再赋值给它
			slide_wrap_top=parseInt(slide_wrap.css('top'));
			slide_wrap_top--;
			slide_wrap.css('top',slide_wrap_top+'px');
		},50);
	}

	move1();
}

这里与无缝滚动最大的不同在于需要使用两个定时器，一个定时器进行移动层的移动，一个定时器进行间歇时间的控制。并且多加了一个判断：

                        // li的高度为30px;
			//判断包裹层每移动30px(也就是li的高度);就将timer1清除，并设置timer2，延迟1秒后执行move1;
			if (slide_wrap_top%30==0) {
				clearInterval(timer1);
				timer2=setTimeout(move1,1000);
			}

这里因为li的高度为30，于是判断移动层的top值等于30的倍数时，就表示移动了一个li的距离，然后就将timer1清除，停止运动，然后定义一个新的定时器timer2,并延迟1秒再次执行运动函数。