JS_图片轮播事件

 用JavaScript实现一个简单的图片轮播事件。

主要的思想是把需要显示的图片显示出来，不需要的隐藏，然后使用自己封装的代码动画显示出来（setInterval）

贴上代码：

html

<div class="content">
        <div class="img_change">
            <div id="img_container"></div>
            
            <div class="bottom_part">
                <div class="bottom_img">
                    <ul>
                        <li><a href="###" class="bot_img1"></a></li>
                        <li><a href="###" class="bot_img2"></a></li>
                        <li><a href="###" class="bot_img3"></a></li>
                        <li><a href="###" class="bot_img4"></a></li>
                        <li><a href="###" class="bot_img5"></a></li>
                    </ul>
                </div>
                <div class="change_btn">
                    <ul id="btn_container"></ul>
                </div>
            </div>
        </div>
    </div>

css:

.content{
     700px;
    margin:100px auto;
}
.img_change{
     731px;
    height: 300px;
    position: relative;
}
.img_part{
    position: absolute;
    display: none;
    opacity: 0;
}
.bottom_part{
     731px;
    height: 80px;
    background-color:rgba(123,132,131,0.6); 
    position: absolute;
    bottom: 0;
    left: 0;
}
.change_btn ul{
    list-style: none;
    text-align: right;
    margin-top:50px;
    margin-right: 20px;
}
.change_btn>ul>li{
    display: inline-block;
    25px;
    height: 10px;
    background: #1e443f;
    cursor: pointer;
    opacity: 0.8;
    margin-right: 10px;
}
.active{
    background: #d7d7d7 !important;
}
.bottom_img ul{
    list-style: none;
    margin-top: 8px;
}
.bottom_img ul li{
    float: left;
     65px;
    height: 65px;
    margin-left: 30px;
}
.bottom_img ul li a{
    display: inline-block;
     100%;
    height: 100%;
    background: url(../images/btn_index_a.png) no-repeat;
}
.bottom_img ul li a.bot_img2{
    background-position: -68px 0px;
}
.bottom_img ul li a.bot_img3{
    background-position: -136px 0px;
}
.bottom_img ul li a.bot_img4{
    background-position: -204px 0px;
}
.bottom_img ul li a.bot_img5{
    background-position: -272px 0px;
}

common.js:

function objAnim(){
    var defalutSpeed = 50;

    //淡入
    this.fadeIn = function(obj,speed,callback,flag){
        var num = Math.floor(window.getComputedStyle(obj,false).opacity*10);
        var speed = speed || defalutSpeed;

        if (flag == 0) {
            callback(obj);
        }

        if(num == 10){
            return;
        }
        else{
            var timer = setInterval(function(){
                num += 1;
                obj.style.opacity = num/10;
                if(num == 10){
                    clearInterval(timer);
                    if(flag == 1){
                        callback(obj)    
                    }
                }
            },speed);
        }
    };

    //淡出
    this.fadeOut = function(obj,speed,callback,flag){
        var num = Math.floor(window.getComputedStyle(obj,false).opacity*10);
        var speed = speed || defalutSpeed;

        if (flag == 0) {
            callback(obj);
        }

        if(num == 0){
            return;
        }
        else{
            var timer = setInterval(function(){
                num -= 1;
                obj.style.opacity = num/10;
                if(num == 0){
                    clearInterval(timer);
                    if(flag == 1){
                        callback(obj);    
                    }
                }
            },speed);
        }
            
    };

    //显示
    this.show = function(obj){
        obj.style.display = "block";
    }

    //隐藏
    this.hide = function(obj){
        obj.style.display = "none";
    }
}

function.js

//获取className
function getClassName(clsName,oParent){
    var oParent = oParent?document.getElementById(oParent):document;
    var eles =[];
    var element = oParent.getElementsByTagName("*");

    for(var i =0;i<element.length;i++){
        if(clsName == element[i].className){
            eles.push(element[i]);
        }
    }

    return eles;
}


var currentIdx = 0;
var animator = new objAnim();

//图片轮播
function bannerChange(speed){
    var img_part = getClassName("img_part");

    //对第一个进行处理
    animator.fadeIn(img_part[currentIdx],0,animator.show,0);
    //循环轮播
    cycleChange();
}

//循环轮播事件
var change_timer =null;
function cycleChange(speed){
    var img_part = getClassName("img_part");
    var speedChange = speed | 4000;
    var nextIdx;
    currentIdx = 0;

    change_timer = setInterval(function(){

        nextIdx = (currentIdx==img_part.length-1)?0:currentIdx+1;

        switchImg(currentIdx,nextIdx);

        // nextIdx = (nextIdx==img_part.length-1)?0:nextIdx+1;
        // currentIdx = (currentIdx==img_part.length-1)?0:currentIdx+1;
        currentIdx = nextIdx;

    },speedChange)
}

//绑定鼠标事件
function changeImg(){
    var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
    var change_len = change_btn.length;
    
    for(var i = 0;i<change_len;i++){
        (function(m){
            change_btn[i].onclick = function(){
                if(m != currentIdx){
                    var nextIdx = m;
                    switchImg(currentIdx,nextIdx);
                    clearInterval(change_timer);
                    cycleChange();
                    currentIdx = nextIdx;
                }
            }
        })(i)
    }
}

//图片的切换调用
function switchImg(currentIdx,nextIdx){
    var img_part = getClassName("img_part");
    var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
    
    //隐藏当前的页面
    //效果正常(切换)
    animator.fadeOut(img_part[currentIdx],50,animator.hide,1);
    //效果明显
    //animator.hide(img_part[currentIdx])
    //img_part[currentIdx].style.opacity = "0"
    change_btn[currentIdx].className = "";

    //显示下一个页面
    animator.fadeIn(img_part[nextIdx],100,animator.show,0);
    change_btn[nextIdx].className = "active";

}

//动态生成按钮和图片
function addImages(jsonObj,count,isClearCtn){
    var cnt = count;
    var img_container = document.getElementById("img_container");
    var btn_container = document.getElementById("btn_container");

    if(isClearCtn){
        btn_container.innerHTML = "";
        img_container.innerHTML = "";
    }

    for(var i=0;i<cnt;i++){
        if(i == 0){
            btn_container.innerHTML += '<li class="active"></li>';
            img_container.innerHTML += '<div class="img_part"><img src="./images/'+jsonObj[i]+'"></div>';
        }else{
            btn_container.innerHTML += "<li></li>";
            img_container.innerHTML += '<div class="img_part"><img src="./images/'+jsonObj[i]+'"></div>';
        }            
    }
}

script.js

window.onload=function(){
    var change_btn = getClassName("change_btn")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
    var chang_len = change_btn.length;
    
    
    var jsonObj =["banner-1.png","banner-2.png","banner-3.png"];
    //动态生成图片
    addImages(jsonObj,jsonObj.length,true);

    //触发图片轮播    
    bannerChange();

    //鼠标点击事件
    changeImg();

}

（还有JQ实现图片轮播，代码相对简介，复用率高。效果大同小异：http://www.cnblogs.com/adelina-blog/p/5917095.html）

由于涉及到图片的问题，所以就PO上一张截图供效果参考：

 

以上内容，如有错误请指出，不甚感激。