JS 图片轮播

来源：互联网发布：淘宝店铺装饰编辑：程序博客网时间：2024/04/30 06:38

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body style="margin: 0">
<div id="picDiv" style="position: relative;margin: 0 auto;"></div>
</body>

}

        Picture.prototype={

         add : function(option) {
             this.pics.push(option);
         },

         __pageChangeColor : function(option) {
             for ( var i = 0; i < this.pics.length; i++) {
                 document.getElementById("pageId" + i).style.background = this.config.pageUnselectColor;
             }
             document.getElementById("pageId" + option.pageIndex).style.background = this.config.pageSelectColor;
         },

         __bindEvent: function(eventName,func){
         if(this.addEventListener){// firefox , w3c
           this.addEventListener(eventName,func,false);
         }else{
           this.attachEvent("on"+eventName,func);
         }
         },

        build : function() {
             var picObjThis = this;
             //init picDiv width, height
             var picDiv = document.getElementById("picDiv");
             picDiv.style.width = this.config.width + "px";

             //init first img ,page button
             var imgHtml = '<a href="'+this.pics[0].link+'" target="_blank" id="aHrefId"> <img id="'+this.imageElementId+'" src="'+this.pics[0].url +'" width="'+this.config.width+'px"/></a>';
             //if config pages
             if(this.config.hasPage){
              //construct all page button
              var pageButtonDivs= [];
              for ( var i = this.pics.length - 1; i >= 0; i--) {
                  pageButtonDivs.push('<div style="padding-left:3px;float:right;"><div id = "pageId'+i+'" style="'+this.pageButtonCss+'">'
                                  + i + '</div></div>');
              }
              var pageDivHtml = '<div id="pageDiv" style="' + this.pageDivCss + '">';
              var pagesHtml = pageButtonDivs.join("");
              var contentHtml = imgHtml + pageDivHtml + pagesHtml + '</div>';
              picDiv.innerHTML = contentHtml;
              //alert(contentHtml)
              //select first
              this.__pageChangeColor({
                  pageIndex : 0
              })
              //add mouse event to page button div
              for ( var i = 0; i < this.pics.length; i++) {
                  var pageIdDiv = document.getElementById("pageId" + i);
                  pageIdDiv.onmouseover = function() {
                      picObjThis.currentIndex = parseInt(this.innerHTML);
                      picObjThis.__pageChangeColor({
                          pageIndex : picObjThis.currentIndex
                      })
                      document.getElementById(picObjThis.imageElementId).src = picObjThis.pics[picObjThis.currentIndex].url;
                      //img link url
                      document.getElementById("aHrefId").href = picObjThis.pics[picObjThis.currentIndex].link;
                      //don't show next pic
                      picObjThis.runNext = false;
                  };
                  this.__bindEvent.call(
                  pageIdDiv,
                  "mouseout",
                  function() {
                       //show next pic
                       picObjThis.runNext = true;
                  }
                  );
              }
             }else{
             picDiv.innerHTML = imgHtml;
             }
             window.setInterval(
                    function() {
                        if (picObjThis.runNext) {
                            picObjThis.currentIndex++;
                            picObjThis.currentIndex = picObjThis.currentIndex >= picObjThis.pics.length ? 0
                                    : picObjThis.currentIndex;
                            //if has pages
                            if(picObjThis.config.hasPage){
                             picObjThis.__pageChangeColor({
                                 pageIndex : picObjThis.currentIndex
                             });
                            }
                            document.getElementById(picObjThis.imageElementId).src = picObjThis.pics[picObjThis.currentIndex].url;
                            //img link url
                            document.getElementById("aHrefId").href = picObjThis.pics[picObjThis.currentIndex].link;
                        }
                    }, picObjThis.config.intervalTime);
         }
        }

//使用方法，你只需new 一个Picture对像，指定宽||[是否有页码等参数]

//调用add方法把源图片的地址，链接保存

//最后调用build方法，就可以大功告成了，

//注意：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

// 必须声明，否则IE下不能运行

// 使用DEMO：

        var pic = new Picture({
        width: 400
        });

//如果你不想要页码效果 var pic = new Picture({width: 400,hasPage: false });参数内容你可以参照类注释

        pic.add({
            url : "018.JPG",
            link : "http://www.baidu.com"
        });
        pic.add({
                    url : "019.JPG",
                    link : "http://games.qq.com/d/onlinegame/2/1111/piclib.shtml#typeid=14&picid=27031"
                });
        pic.add({
            url : "020.JPG",
            link : "http://blog.csdn.net/gaochh01/article/details/7784479"
        });
        pic.build();
    </script>