原生js实现焦点轮播图动态切换

已经学了一段时间的JavaScript，正好可以给之前写过的html静态的页面文件添加一些动态的效果，丰富一下。当然最初也会参考他人的写法，下面就博主自己在敲代码的过程描述，初学者能力有限，欢迎大牛来喷~~

• 左右箭头点击切换
• 小圆点点击切换
• 箭头和小圆点交替切换
• 暂未实现定时切换

---

<div id="center">     <div id="list" style="left:0px;">       <a href="#"><img src="" alt=""/></a>       <a href="#"><img src="" alt=""/></a>       <a href="#"><img src="" alt=""/></a>       <a href="#"><img src="" alt=""/></a>       <a href="#"><img src="" alt=""/></a>     </div>     <a href="javascript:;" class="arrow" id="prev">&lt;</a>     <a href="javascript:;" class="arrow" id="next">&gt;</a>       <div id="dot">        <span index="1" class="on"></span>        <span index="2"></span>        <span index="3"></span>        <span index="4"></span>        <span index="5"></span>    </div></div>

首先是页面文件布局，结构的话，先是用一个大的容器包裹，里面分三部分，第一部分就是我们的图片模块，第二部分是图片两边的左右箭头，第三部分就是下面的点击切换以及显示状态的小圆点。

#center{width: 760px; height: 380px; position: relative;overflow: hidden;}#center:hover a.arrow{display: block;}/*鼠标滑过图片显示左右箭头*/#list{width: 3800px; height: 380px; position: absolute;}#list img{float: left;}.arrow{position: absolute;top: 160px; font-weight: bold; display: none; width: 50px;height: 50px; color: #fff; background: #ccc; z-index:3;text-align: center; overflow: hidden; line-height: 50px; font-size: 50px; cursor: pointer;}#prev{left:20px;}#next{right:20px;}.arrow:hover{background: #aaa;}#dot{position: absolute; bottom: 10px; left: 50%; margin-left: -35px;}#dot span{background: #ccc; border-radius:50%; cursor: pointer; display: inline-block; width: 14px; height: 14px;}#dot .on,#dot span:hover{background: #666;}

css样式参考

注意：这里的尺寸都是根据自己的图片大小设定的，你可以自行设置。这里暂不讨论图片加载的数量以及大小问题。

页面结构清楚了，下面就是我们就步入正题了。

var list = document.getElementById('list');   var dots = document.getElementById('dot').getElementsByTagName('span');var prev = document.getElementById('prev');var next = document.getElementById('next');

首先我们需要获取到图片对象、小圆点对象以及左右箭头。

function animate(offset){    var newLeft = parseInt(list.style.left) + offset;    list.style.left = newLeft +'px';    if(newLeft>0){        list.style.left = -3040 +'px';        }    if(newLeft<-3040){        list.style.left = 0+'px';        }    list.style.transition = '1s';  //过渡效果    }

定义一个图片切换函数，原理是根据判断改变图片的绝对定位。

function showDot(){    for(var i=0;i<dots.length;i++){        if(dots[i].className == 'on'){            dots[i].className = '';             break;        }       }    dots[index-1].className = 'on';}

这是小圆点的显示与切换函数。先遍历小圆点，把类名为on的小圆点的类改为空。

    /**     * 右箭头的点击切换     */    next.onclick = function(){        if(index==dots.length){            index=1;        }else{            index = index+1;        }        animate(-760);        showDot();    }    /**     * 小圆点的点击切换     * 注意，myIndex取出来的自定义属性index是字符串型，而不是数字型，要做转换。     */    for(var i=0;i<dots.length;i++){        dots[i].onclick = function(){            if(this.className=='on'){            return;            }    var myIndex = parseInt(this.getAttribute('index'));    var offset = -760*(myIndex-index);        animate(offset);        index = myIndex;        showDot();        }           }

index是在html里给小圆点加的一个自定义属性，用于判断小圆点的索引值。

遇到的问题
1.因为是固定的图片数量和尺寸，所以在判断的时候也需要计算好
2.在if里面做判断是==，执行语句里的赋值是=，很容易因为不小心出错
3.获取索引值index的时候，虽然我们看到的是数字，但其实是字符型，要做转换，我开始遇到这个问题的时候困住了好久，然后各种Google，最后恍然大悟，所以细心很重要！！！

---