焦点轮播图（2） js箭头切换

完成了静态布局，开始用JS实现动态效果了。
先用JS实现前后箭头切换图片的功能。

首先在页面加载完成时通过id号来获取元素。

window.onload = function (){
				var container = document.getElementById('container');
				var list = document.getElementById('list');
				var buttons = document.getElementById('buttons').getElementsByTagName('span');
				var prev = document.getElementById('prev');
				var next = document.getElementById('next');
			}

获取到元素后，下面添加事件绑定：
####next箭头：

next.onclick = function() {
					list.style.left = parseInt(list.style.left) - 600 + ‘px’;
				}

当点击向右的箭头时，list的style属性的left值 - 600px，实现切换到下一张图片。

注意：list.style.left初始时是 “600px”,是一个字符串，不能直接做算数运算，所以得先用parseInt转换。记得最后加上单位“px”。

####prev箭头：
同理，只是图片右移left变大，运算改为 +

prv.onclick = function() {
					list.style.left = parseInt(list.style.left) + 600 + 'px';
				}

最后还可以优化一下代码，next和prev两个点击事件只有一个运算符号不同，所以可以通过传参的形式来调用函数：

function change(offset){
					list.style.left = parseInt(list.style.left) + offset + 'px';
				}
				
				next.onclick = function() {
					change(-600);
				}
				
				prev.onclick = function() {
					change(600);
				}

此时就能实现箭头切换图片的功能了。不过只能切换列表个数张的图片，一直点击会出现空白页。

还没有无限滚动切换的功能，接下来继续更！