焦点轮播图（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);                }

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

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