Day16-小功能系列:无缝滚动

Day16-小功能系列:无缝滚动。

---

图片的连续滚动效果

---

前端界面

<div class="main">
	<div class="width">
		<div class="color red">div>
    	<div class="color blue">div>
        <div class="color green">div>
        <div class="color red">div>
    div>
div>

外面的main盒子放整个div
中间的width盒子是为了撑开整个main盒子
最中间的盒子就是无缝滚动的部分
且一个red盒子和最后一个red盒子要一样。

---

Css代码

.main{
	width:500px;
	height:500px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #000;
}
.width{
	width:2000px;
	height:500px;
}
.color{
	width:500px;
	height:500px;
	float:left;
}
.red{
	background:red;
}
.blue{
	background:blue;
}
.green{
	background:green;
}

main盒子为滚动区域的宽度。
width盒子为整个区域的宽度。宽度 = 滚动的盒子数 x 一个盒子的宽度。
color类是是为了确定盒子高度和宽度，及所有盒子往左排列，所以设置float:left;属性。
其他的类是给盒子设置颜色，便于区分。

设置完样式后，盒子应该是这个样子的。

---

JavaScript部分

1.首先导入jquery文件。
2.我们先写一个加载代码。

$(function(){
	
});

3.写个Down()，Down()的作用，获取scrollLeft属性(只有设置了overflow的盒子才有)，然后再让将scrollLeft属性赋值给自定义变量sl，让变量sl递增，然后再将递增之后的值传回给scrolllLeft的有参方法。

function Down(){
		var sl = $(".main").scrollLeft();
		sl++;
		$(".main").scrollLeft(sl);
}

4.设置一个让盒子滚动起来的定时器。并声明一个全局变量Time，将定时器赋值再Time上。

var Time;
Time = setInterval("Down()",10);

---

5.这样就实现了一个简单的无缝滚动，但是以上代码运行之后，只会滚动到最后一个盒子就停止了。所以需要加一个if判断，当盒子滚动完第三个盒子时，瞬间切换到第一个盒子，而第四个盒子只起到一个过渡的作用。

if(sl == 1500){				//1500即三个盒子的宽度，即第三个盒子滚动完。
	$(".main").scrollLeft(0);	//将scrollLeft的值设为1，即第一个盒子的位置。
}

6.写完if判断之后，盒子就可以无限滚动了。
7.之后继续做<无缝滚动>的加强版。当每滚动完一张图片(或盒子)时暂定2秒左右，然后再继续滚动。
8.所以还得加一个if判断，当滚动完一张时，则清除定时器，再执行一个一次性定时器。
9.在写个Time()，为一次性定时器setTimeout的执行函数。Time()的作用，即再次开启定时器Time，
10.再声明一个全局变量TimeR来记录这个一次性定时器。

var TimeR;
if(sl%500 == 0){
	clearInterval(Time);
	TimeR = setTimeout("Timeout()",2000);
}

function Timeout(){
	Time = setInterval("Down()",10);
}

---

10.完成之后，可以再在左右两边添加两个按钮，一个往左，一个往右。

<div class="btn left"><div>
<div class="btn right">>div>

这两个盒子与main盒子同级。且中间有文字“>”"<"代表左右方向；

11.添加css样式

.btn{
	top:200px;
	width:70px;
	height:140px;
	font-size:36px;
	background:#CCC;
	text-align:center;
	line-height:140px;
	position:absolute;
}
.left{
	left:710px;
}
.right{
	right:710px;
}

设置绝对定位把盒子放在main盒子的左右两边。

12.再添加一个伪类效果，让鼠标移入有小手势。

.btn:hover{
	cursor:pointer;
}

效果图：

---

13.给左边的切换按钮添加单击事件,首先清除所有的定时器，然后再启动向左的定时器。

$(".left").click(function(){
		clearInterval(Time);
		clearInterval(TimeR);
		Time = setInterval("Up()",1);
});

14.写Up()方法，和Down方法相似，只是Up方法为递减。

function Up(){
		var sl = $(".main").scrollLeft();
		sl--;
		$(".main").scrollLeft(sl);
		if(sl <= 0){
			$(".main").scrollLeft(1500);
		}
		if(sl%500 == 0){
			clearInterval(Time);
			TimeR = setTimeout("Timeout()",2000);
		}
}

15.如法炮制给右边的按钮也添加点击事件。

$(".right").click(function(){
		clearInterval(Time);
		clearInterval(TimeR);
		Timeout();
	});

---

所有步骤完成。就可以美滋滋的无缝滚动了。

附：无缝滚动的所有JavaScript代码。

var Time;
var TimeR;
$(function(){
	clearInterval(Time);
	Time = setInterval("Down()",1);
	$(".left").click(function(){
		clearInterval(Time);
		clearInterval(TimeR);
		Time = setInterval("Up()",1);
	});
	$(".right").click(function(){
		clearInterval(Time);
		clearInterval(TimeR);
		Timeout();
	});
});
function Down(){
		var sl = $(".main").scrollLeft();
		sl++;
		$(".main").scrollLeft(sl);
		if(sl >= 1500){
			$(".main").scrollLeft(0);
		}
		if(sl%500 == 0){
			clearInterval(Time);
			TimeR = setTimeout("Timeout()",2000);
		}
}
function Up(){
		var sl = $(".main").scrollLeft();
		sl--;
		$(".main").scrollLeft(sl);
		if(sl <= 0){
			$(".main").scrollLeft(1500);
		}
		if(sl%500 == 0){
			clearInterval(Time);
			TimeR = setTimeout("Timeout()",2000);
		}
}
function Timeout(){
	Time = setInterval("Down()",1);
}

---

啦啦啦，终于写完了。