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

原生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，最后恍然大悟，所以细心很重要！！！

---