网页图片切换效果

/**

* 图片切换效果

* king 2014-08-04

*/ 

 

/***   使用实例  html 页面

<div id="xxx"> 

    <script style="text/javascript"> 

        var box = new PPTBox(); 

        box.width = 500;    //宽度 

        box.height = 200;   //高度 

        box.autoplayer = 4;   //自动播放间隔时间 

       

        //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"}) 

        box.add({"url":"images/1.jpg","href":"#","title":"悬浮提示标题1"}) 

        box.add({"url":"images/2.jpg","href":"#","title":"悬浮提示标题2"}) 

        box.add({"url":"images/3.jpg","href":"#","title":"悬浮提示标题3"}) 

        box.add({"url":"images/4.jpg","href":"#","title":"悬浮提示标题4"}) 

        box.show();  // 展示图片 

    </script> 

</div>

****/

 

var PPTBoxHelper =  { 
    count: 0, 
    instance: {}, 
    getId: function() { return '_ppt_box-' + (this.count++); } 
};
 
function PPTBoxCss(){
    var PPTBoxCss = [];
    PPTBoxCss.push('/*焦点图*/');
    PPTBoxCss.push('.mainbox{overflow:hidden;  position:relative;}');
    PPTBoxCss.push('.flashbox{ overflow:hidden;  position:relative;}');
    PPTBoxCss.push('.imagebox{ text-align:right;position:relative;z-index:999;}');
    /* // 使用CSS样式  不用图片
    PPTBoxCss.push('.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;}');
    PPTBoxCss.push('.defimg{background-image:url(images/02.png)}');
    PPTBoxCss.push('.curimg{background-image:url(images/01.png)}');*/
   
    PPTBoxCss.push('.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer; -moz-border-radius: 18px;-webkit-border-radius: 18px;border-radius:18px;}');
    PPTBoxCss.push('.defimg{background:#DDD;}');
    PPTBoxCss.push('.curimg{background:#F00;}');
   
    PPTBoxCss = PPTBoxCss.join('\r\n');
    var style = document.createElement("style");
    style.setAttribute("type", "text/css");
    if(style.styleSheet){   // IE
        style.styleSheet.cssText = PPTBoxCss;
        document.getElementsByTagName('head')[0].appendChild(style);
    } else {    // w3c
        var cssText = document.createTextNode(PPTBoxCss);
        style.appendChild(cssText);
        document.head.appendChild(style);
    }
}
 
// 定义一个图片处理类
function PPTBox(){
    this.uid = PPTBoxHelper.getId(); 
    PPTBoxHelper.instance[this.uid] = this;
    // 判断是否添加css 样式
    if(this.uid == '_ppt_box-0'){ PPTBoxCss(); }
    this._$ = function(id){ return document.getElementById(id); };
    this.width = 988;   //宽度 
    this.height = 323;  //高度 
    this.picWidth = 15; //小图宽度 
    this.picHeight = 12;    //小图高度 
    this.autoplayer = 4;    //自动播放间隔（秒）
    this.target = "_blank"; 
    this._box = []; 
    this._curIndex = 0;
    this._dir = 1;      // 图片滚动方向
}
// 公共方法  添加图片
PPTBox.prototype.add = function(imgParam){
    this._box.push(imgParam);
};
//展示图片
PPTBox.prototype.show = function(){
    this._createMainBox(); 
    this._init(); 
    this._autoPlay();
};
 
// 私有方法
PPTBox.prototype._createMainBox = function (){ 
    var flashBoxWidth = this.width * this._box.length + 5; 
    var html = "<div id='"+this.uid+"_mainbox' class='mainbox'  style='width:"+(this.width)+"px;height:"+(this.height+2)+"px;'>"; 
    html += "<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'></div>";  
    html += "<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight+2)+"px;top:-"+(this.picHeight+25)+"px;'></div>"; 
    html += "</div>"; 
    document.write(html); 
};
PPTBox.prototype._init = function (){
    this.eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
    var imageHTML=""; 
    var flashbox = "";
   
    for(var i=0;i<this._box.length;i++){ 
        var parame = this._box[i]; 
        flashbox += this.flashHTML(parame.url, i); 
        imageHTML = this.imageHTML(parame.title, i) + imageHTML;
    } 
    this._$(this.uid+"_flashbox").innerHTML = flashbox; 
    this._$(this.uid+"_imagebox").innerHTML = imageHTML; 
};
PPTBox.prototype._play = function(){ 
    var idx = this._curIndex + this._dir;
    (idx < 0) && (this._dir = 1, idx = 1);
    (idx > this._box.length-1) && (this._dir = -1, idx = this._box.length-2);
    this.changeIndex(idx);
    this._autoPlay();
};
PPTBox.prototype._autoPlay = function(){
    if(this.autoplayer > 0){ 
        var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()"; 
        this._autoplay = setInterval(eventstr, this.autoplayer*1000); 
    } 
}
 
// ------------------
PPTBox.prototype.flashHTML = function(url, idx) { 
    var isFlash = url.substring(url.lastIndexOf('.')+1).toLowerCase() == "swf";
    var html = ""; 
 
    if(isFlash){ 
        html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ";
        html +="codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' "
        html +="width='" + this.width + "' height='" + this.height + "'> " 
        html +="<param name=\"movie\" value=\""+url+"\" />" 
        html +="<param name='quality' value='high' />" 
        html += "<param name='wmode' value='transparent'>" 
        html +="<embed src='"+url+"' quality='high' wmode='opaque' pluginspage='http://www.macromedia.com/go/getflashplayer' " 
        html +="type='application/x-shockwave-flash' width="+this.width+" height='"+this.height+"'></embed>" 
        html +="</object>"; 
    } else { 
        var style = ""; 
        if(this._box[idx].href){  style = "cursor:pointer" } 
        html = "<img src='"+url+"' style='width:"+this.width+"px;height:"+this.height+"px;"+style+"' ";
        html +="onclick = \""+this.eventstr+".clickPic("+idx+")\"/>"; 
    } 
    return html; 
};
PPTBox.prototype.imageHTML = function(title, idx){
    return "<div class='bitdiv "+((idx==0)?"curimg":"defimg")+"' title ="+title+" src='bit01.gif'\
        onclick = \""+this.eventstr+".clickPic("+idx+")\"  onmouseover=\""+this.eventstr+".mouseoverPic("+idx+")\"></div>";
};
PPTBox.prototype.mouseoverPic = function(idx){ 
    this.changeIndex(idx);
    this._autoPlay();
};
PPTBox.prototype.clickPic = function(idx){ 
    var parame = this._box[idx]; 
    if(parame.href != ""){ 
        window.open(parame.href, this.target); 
    } 
};
PPTBox.prototype.changeIndex = function(idx){
    clearInterval(this._autoplay);
    var parame = this._box[idx]; 
    moveElement(this.uid+"_flashbox",-(idx*this.width),1); 
    var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div"); 
    imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg"; 
    imgs[this._box.length-1-idx].className = "bitdiv curimg"; 
    this._curIndex = idx; 
};
 
function moveElement(elementID,final_x,interval) { 
    if (!document.getElementById) return false; 
    if (!document.getElementById(elementID)) return false; 
   
    var elem = document.getElementById(elementID); 
    if (elem.movement) { 
        clearTimeout(elem.movement); 
    } 
    if (!elem.style.left) { 
        elem.style.left = "0px"; 
    } 
    var xpos = parseInt(elem.style.left); 
    if (xpos == final_x ) { 
        return true; 
    } 
    if (xpos < final_x) { 
        var dist = Math.ceil((final_x - xpos)/5); 
        xpos = xpos + dist; 
    } 
    if (xpos > final_x) { 
        var dist = Math.ceil((xpos - final_x)/5); 
        xpos = xpos - dist; 
    } 
    elem.style.left = xpos + "px"; 
    var repeat = "moveElement('"+elementID+"',"+final_x+","+interval+")"; 
    elem.movement = setTimeout(repeat,interval); 
}

运行结果：