图片轮播器

来源：互联网发布：mac 备份照片图库编辑：程序博客网时间：2024/06/07 09:44

图片轮播器在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;        }    }}

0 0