原生javascript 轮播图插件

javascript插件源码

最新修改：兼容ie7、8、9，火狐、谷歌；（其他浏览器请自测）

增加：无限轮播功能；

/**
 * YSlide轮播图插件
 * @param {type} config
 * config.box           : 轮播图容器ID (轮播图容器的父ID)
 * config.num           : 轮播图的数量 (数字，根据具体轮播子元素数量而定)
 * config.speed         : 轮播图的速度 (毫秒数,0-正无穷)
 * config.direction     : 轮播图方向 (left/right/top/bottom)
 * config.point         : 轮播图点选按钮 (true/false)
 * config.lr_btn.show   : 左右按钮显示隐藏 (true/false)
 * config.lr_btn.hover  ：左右按钮划过效果 (true/false)
 */
function YSlide (config){
    //动画
    function startMove(obj, json, fnEnd) {
        function getStyle(obj, name) {
            if(obj.currentStyle) {
                return obj.currentStyle[name];
            }
            else {
                return getComputedStyle(obj, false)[name];
            }
        }
        clearInterval(obj.timer);
        obj.timer=setInterval(function (){
            var bStop=true;     //假设：所有值都已经到了
            for(var attr in json) {
                var cur=0;
                if(attr=='opacity') {
                    cur=Math.round(parseFloat(getStyle(obj, attr))*100);
                }
                else {
                    //alert(getStyle(obj, attr))
                    cur=parseInt(getStyle(obj, attr));
                }
                var speed=(json[attr]-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(cur!=json[attr])  bStop=false;
                if(attr=='opacity') {
                    obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                    obj.style.opacity=(cur+speed)/100;
                }
                else {
                    obj.style[attr]=cur+speed+'px';
                }
            }
            if(bStop) {
                clearInterval(obj.timer);           
                if(fnEnd)fnEnd();
            }
        }, 30);
    };
    function getStyle(element, attr) {
        var value;
        if (typeof window.getComputedStyle != 'undefined') {//W3C
            value = window.getComputedStyle(element, null)[attr];
        } else if (typeof element.currentStyle != 'undeinfed') {//IE
            value = element.currentStyle[attr];
        }
        return value;
    }
    var oBox = document.getElementById(config.box);
    var oBoxUL = oBox.getElementsByTagName('ul')[0];
    var oBoxList = oBoxUL.getElementsByTagName(config.boxList);
    var direction = config.direction;
    var bool = true;
    var img = 0;
    var oBox_px = '';
    if (config.direction == direction) { //根据方向自动滚动
        if (direction == 'left' || direction == 'right') { 
            oBox_px = getStyle(oBox, 'width').split('p')[0];
            var oBoxUL_width = oBox_px*config.num+'px';
            oBoxUL.style.width = oBoxUL_width; 
            if (direction == 'left') oBoxUL.style.left = 0;
            else oBoxUL.style.right = 0;
            var oBoxLI = document.createElement("li");
            oBoxLI.innerHTML =  oBoxUL.getElementsByTagName('li')[0].innerHTML;
            oBoxUL.appendChild(oBoxLI);
        }if (direction == 'top' || direction == 'bottom') {
            oBox_px = getStyle(oBox, 'height').split('p')[0]
            var oBoxUL_height = oBox_px*config.num+'px';
            oBoxUL.style.height = oBoxUL_height;
            if (direction == 'top') oBoxUL.style.top = 0;
            else oBoxUL.style.bottom = 0;
            var oBoxLI = document.createElement("li");
            oBoxLI.innerHTML =  oBoxUL.getElementsByTagName('li')[0].innerHTML;
            oBoxUL.appendChild(oBoxLI);
        };// 判断上下左右
        function autoslide(){ 
            if (bool) {
                img = img + 1;
                if (img == config.num) {eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)},function(){oBoxUL.style.'+direction+'=0})');img = 0;}
                else{eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)})');}
                if(config.point){
                    var point_li = point.getElementsByTagName('li');
                    for (var s = 0 ; s < config.num; s++ ) {
                        point_li[s].className = '';
                    }; 
                    point_li[img].className = 'cur'
                }   
            }else return;
        }
        var start = setInterval(autoslide , config.speed) 
    };
    if(config.point){ //如果point为true，创建点选按钮，并默认第一个选中
        var point = document.createElement('ol');
        var point_html = '';
        for (var i = 0 ;i < config.num; i++) {
            point_html += '<li>'+i+'</li>'
        };
        point.innerHTML = point_html;
        oBox.insertBefore(point,oBoxUL);
        point.getElementsByTagName('li')[0].className = 'cur';
        var point_li = point.getElementsByTagName('li');
        for (var j = 0 ;j < config.num; j++) {
            point_li[j].index = j;
            point_li[j].onclick = function (){  
                var a = this.index;
                for (var k = 0 ; k < config.num; k++ ) {
                    point_li[k].className = '';
                };
                this.className = 'cur';            
                eval('startMove(oBoxUL,{'+direction+':-(oBox_px*a-1)})');
                img = a;
            }   
        };
    }
    if(config.lr_btn.show){ //如果config.lr_btn.show为true，创建左右点击按钮
       var l_btn = document.createElement('span'); 
       l_btn.id = 'YSlide_left_btn';
       var r_btn = document.createElement('span');
       r_btn.id = 'YSlide_right_btn';
       oBox.appendChild(r_btn);
       oBox.appendChild(l_btn);
       if (config.lr_btn.hover) { //如果config.lr_btn.hover为true，左右按钮默认划过box显示，划出box隐藏
            r_btn.style.cssText= 'position:absolute;left:10px;top:50%;width:20px;height:80px;margin-top:-40px;background:#ccc;pointer :cursor;z-index:11';
            l_btn.style.cssText= 'position:absolute;right:10px;top:50%;width:20px;height:80px;margin-top:-40px;background:#ccc;pointer :cursor;z-index:11'; 
            l_btn.setAttribute('style','position:absolute;left:10px;top:50%;width:20px;height:80px;margin-top:-40px;background:#ccc;pointer :cursor;z-index:11');
            r_btn.setAttribute('style','position:absolute;right:10px;top:50%;width:20px;height:80px;margin-top:-40px;background:#ccc;pointer :cursor;z-index:11');
            oBox.onmouseover = function(){
                r_btn.style.display = 'block';
                l_btn.style.display = 'block';
                bool = false;
            }
            oBox.onmouseout = function(ev){
                var e = ev || event
                if (this.contains(e.toElement)) return;
                r_btn.style.display = 'none';
                l_btn.style.display = 'none'; 
                bool = true;       
            }
        };
a85d
        l_btn.onclick = function(){  //点击左按钮事件          
            img = img-1
            if (img < 0) {eval('oBoxUL.style.'+direction+'= -(oBox_px*config.num)+"px";img = config.num-1;startMove(oBoxUL,{'+direction+':-(oBox_px)*(config.num-1)})')}
            else{eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)})');}
            if (config.point) {
                var point_li = point.getElementsByTagName('li');
                for (var j = 0 ; j < config.num; j++ ) {
                point_li[j].className = '';
                };
                point_li[img].className = 'cur';  
            };                                         
        }
        r_btn.onclick = function(){ //点击右按钮事件 
            img = img+1
            if (img == config.num) {eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)},function(){oBoxUL.style.'+direction+'=0})');img = 0;}
            else{eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)})');}
            //eval('startMove(oBoxUL,{'+direction+':-(oBox_px*img)})');
            if (config.point) {
                var point_li = point.getElementsByTagName('li');
                for (var j = 0 ; j < config.num; j++ ) {
                point_li[j].className = '';
                };
                point_li[img].className = 'cur';  
            }; 
        } 
    }   
}

html调用代码

<div class="play" id="play">
<ul>
<li><a href="#"><img src="images/5.jpg" alt="广告一" /></a></li>
<li><a href="#"><img src="images/4.jpg" alt="广告二" /></a></li>
<li><a href="#"><img src="images/3.jpg" alt="广告三" /></a></li>
<li><a href="#"><img src="images/2.jpg" alt="广告四" /></a></li>
<li><a href="#"><img src="images/1.jpg" alt="广告五" /></a></li>
</ul>
</div>
<script type="text/javascript">
YSlide({
box:'play',
num:5,
speed:3000,
direction:'top',
point:true,
lr_btn:{show:true,hover:true}
})
</script>

完整css代码
/*幻灯片*/
.play { width: 470px; height: 150px; overflow: hidden; position: relative; margin: 150px auto 0; }
.play .text {width:100%; position:absolute; left:0; bottom:0; height:60px;}
.play .text div {position:absolute; left:0; top:0; width:100%; height:100%; background:black; filter:alpha(opacity:40); opacity:0.4; z-index:99;}
.play .text span {position:absolute; left:0; top:0; width:100%; height:100%; line-height:60px; color:white; z-index:999; text-align:center; font-size:20px;}
.play ol { position: absolute; right: 5px; bottom: 5px; z-index: 99999; }
.play ol li { float: left; margin-right: 3px; display: inline; cursor: pointer; background: #fcf2cf; border: 1px solid #f47500; padding: 2px 6px; color: #d94b01; font-family: arial; font-size: 12px; }
.play .cur { padding: 3px 8px; font-weight: bold; color: #ffffff; background: #ffb442; position: relative; bottom: 2px; }
.play ul { position: absolute; z-index: 1; left:0; top:0; }
.play ul li { width: 470px; height: 150px; float: left; }
.play ul img { float: left; width: 470px; height: 150px; }