图片轮播器

图片轮播器在WEB门户等站点经常用到的，再结合两边有向右或向左按钮移动操作，这里写成一个控件，方便参考；

HTML结构：

<div class="recmdLBoxbg">
<div class="recmdLBox leftFloat">
<img id="btnLeft"class="hand" border="0" src="/Images/btn_recmdL.png" alt="uih logo" width="16" height="37" align="middle" />
</div>
<div class="recmdListBox">
<div id="recmdList" class="recmdList">
<a href="?"><img class="hand" border="0" src="image/recmdItem01.jpg" alt="uih logo" width="292" height="314" align="middle" /></a> 
<a href="?"><img class="hand" border="0" src="image/recmdItem02.jpg" alt="uih logo" width="292" height="314" align="middle" /></a>
<a href="?"><img class="hand" border="0" src="image/recmdItem03.jpg" alt="uih logo" width="292" height="314" align="middle" /></a>
</div>
</div>
<div class="recmdRBox rightFloat">
<img id="btnRight" class="hand" border="0" src="/Images/btn_recmdR.png" alt="uih logo" width="16" height="37" align="middle" />
</div>
</div>

JS代码：

function initTopMovie() {    
    if (isLoadedTopMeeting && isLoadedTopCourse) {
        topListMovie.init('recmdList', 'btnLeft', 'btnRight');
    } else {
        setTimeout(function () { initTopMovie(); }, 1000);
    }
}

var topListMovie = {
    playerId: '',
    curFrameId: '1xplay',
    frameFPS: 3000,
    moveSpeed: 300,
    inited: false,
    maxItem: 10,
    freeSpace: 3,
    listCon: '',
    imgW: 290,
    showNum: 3,
    btnLeft: '',
    btnRight: '',
    curMoveIndex: 1,
    init: function (imgListId, btnLeftId, btnRightId) {
        var imgLID = '', btnLID = '', btnRID = '';
        if (imgListId == null || '' == $.trim(imgListId)) {
            alert('Image list container id is needed, check it please...');
			return;
        }
        imgLID = $.trim(imgListId);
        if (null != btnLeftId && '' != $.trim(btnLeftId) && null != btnRightId && '' != $.trim(btnRightId)) {
            btnLID = $.trim(btnLeftId);
            btnRID = $.trim(btnRightId);
            this.btnLeft = $('#' + btnLID);
            this.btnRight = $('#' + btnRID);
            this.btnLeftEventAdd();
            this.btnRightEventAdd();
        }
        this.listCon = $('#' + imgLID);
        this.curFrameId = '1xplay';
        this.maxItem = $('#' + imgLID + ' img').size();
        this.imgW = $('#' + imgLID + ' img').eq(0).width();
        this.inited = true;
        this.playerId = setInterval(function () { topListMovie.autoPlay(); }, this.frameFPS);

    },
    btnLeftEventAdd: function () {
        var _this = this;
        this.btnLeft.mouseover(function () {
            _this.movieStop();
        });
        this.btnLeft.mouseout(function () {
            _this.movieActive();
        });
        this.btnLeft.click(function () {
            _this.gotoFrame('l')
        });
    },
    btnRightEventAdd: function () {
        var _this = this;
        this.btnRight.mouseover(function () {
            _this.movieStop();
        });
        this.btnRight.mouseout(function () {
            _this.movieActive();
        });
        this.btnRight.click(function () {
            _this.gotoFrame('r')
        });
    },
    frameItem: function (frameId) {
        var isn = 1;
        try {
            isn = parseInt(frameId);
        } catch (e) {
            isn = 1;
        }
        if (isn < this.maxItem - this.showNum + 1) {
            this.listCon.animate({ 'margin-left': '-=' + (this.imgW + this.freeSpace) }, this.moveSpeed);
        } else {
            this.listCon.animate({ 'margin-left': '0px' }, this.moveSpeed);
        }
    },
    movieStop: function () {
        clearInterval(this.playerId);
    },
    movieActive: function () {
        this.playerId = setInterval(function () { topListMovie.autoPlay(); }, this.frameFPS);
    },
    gotoFrame: function (LRFlag) {
        if(this.maxItem > 3){
			var df = $.trim(LRFlag.toLowerCase());
			if ('r' == df) {
				if (this.curMoveIndex < this.maxItem - this.showNum + 1) {
					this.curMoveIndex++;
					this.listCon.animate({ 'margin-left': '-=' + (this.imgW + this.freeSpace) }, this.moveSpeed);
				}
			} else {
				if (this.curMoveIndex > 1) {
					this.curMoveIndex--;
					this.listCon.animate({ 'margin-left': '+=' + (this.imgW + this.freeSpace) }, this.moveSpeed);
				}
			}
		}
    },
    autoPlay: function () {
        if (!this.inited) { this.init(); };
        var f = this.curFrameId.toLowerCase().split("x");
        this.frameItem(f[0]);
        if (f[1] == "play") {
            var j = parseInt(f[0], 10);
            if (++j > this.maxItem - this.showNum + 1) this.curFrameId = "1xplay";
            else this.curFrameId = j + "xplay";
            this.curMoveIndex = j;
        }
    }
}