JS轮播图效果实现

轮播图可以说是一种最常见的网页效果了，很多大大小小的网站上都有，它可以以动态的方式向用户展示产品或者别的什么东西。

现在尝试自己实现一个，功能点大致如下：

1 - 视窗以一定的时间间隔切换图片

2 - 鼠标指针移至导航条上面，停止自动切换图片

3 - 若鼠标指针移至的导航条索引不是当前的图片索引，视窗切换到导航索引对应的图片

4 - 鼠标移开导航条，恢复图片自动切换

5 - 点击图片可以跳转到对应的页面

 

 

页面制作方式，先定义个div作为包装容器，里面分别定义个包含图片的a元素和一个列表，作为导航条。

class设为active是作为当前轮播点的标识，结构如下。

code1

<div>
            <a href='javascript:void(0);'><img id='img' src='images/1.jpg'/></a>
            <ul id='nav-triggers'>
                <li class='active'>1</li><li>2</li><li>3</li><li>4</li><li>5</li>
            </ul>
        </div>

View Code

轮播的实现需要用到js间歇调用。一般不适用setInterval，因为它存在一些问题，例如两次轮询有可能并不是互斥执行的等等。这里适用setTimeout的方式实现，结构如下：

code2

// 定时循环调用
     var interval = 1500;
     var func = function(){
          console.log('time out');
     };
     setTimeout(function(){
          func();
          setTimeout(arguments.callee, interval);
     }, interval);

View Code

定义一个index变量标识当前轮播索引，然后 func 函数体变换一下，就可以实现最简单的轮播

code3

var func = function(){
          if(++index > 5)
               index = 1;
          // _$,根据id获取dom
          _$('img').setAttribute('src', 'images/' + index + '.jpg');
     };

View Code

加上鼠标移入移出导航条的控制

code4

// 定时循环调用
    var interval = 3000,  // 每隔3秒切换一次
        index = 1; // 当前所轮播的索引
        
    // 'nav-triggers'是导航条ul的id
    var navTriggers = _$('nav-triggers');
    var childLis = getChildNodes(navTriggers, 'LI')
    
    var changePic = function(idx){
        var tween = new Tween();
        tween.setup(0.4,1,400);
        var isImgSeted = false;
        tween.move(function(cur){
            _$('img').style.opacity = cur;
            if(!isImgSeted){
                // _$,根据id获取dom
                _$('img').setAttribute('src', 'images/' + idx + '.jpg');
                isImgSeted = true;
            }
        });
        
        addClassName(childLis[idx - 1], 'active');
    };
    
    var func = function(){
        removeClassName(childLis[index - 1], 'active');
        if(++index > 5)
            index = 1;
        changePic(index);
    };
    
    var timeoutObj = setTimeout(function(){
        func();
        timeoutObj = setTimeout(arguments.callee, interval);
    }, interval);
    
    var isCleared = false;
    navTriggers.addEventListener('mouseover', function(e){
        var target = e.target || e.srcElement;
        if(target.tagName !== 'LI') return;
        for(var i=0, len=childLis.length; i<len; i++){
            if(target === childLis[i])
                break;
        }
        clearTimeout(timeoutObj);
        isCleared = true;
        if(i == index-1) return;
        removeClassName(childLis[index - 1], 'active');
        index = i+1;
        changePic(index);
    });
    
    navTriggers.addEventListener('mouseout', function(e){
        if(!isCleared) return;
        isCleared = false;
        timeoutObj = setTimeout(function(){
            func();
            timeoutObj = setTimeout(arguments.callee, interval);
        }, interval);
    });

View Code