用jquery做的仿flash滾動(dòng)圖片新聞效果

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：926 更新時(shí)間：2011-04-10 23:14 參與評(píng)論

我先是從網(wǎng)上找了一個(gè)easyslide控件，基本還算是好用，可以忽然發(fā)現(xiàn)它與jquery 1.4.1不兼容，調(diào)試了半天也沒(méi)弄好。又找網(wǎng)上找其他組件，花了大約一個(gè)小時(shí)也沒(méi)有找到合適的。干脆自己寫(xiě)一個(gè)簡(jiǎn)單的吧，能夠滿足當(dāng)前的使用需求即可以，以后有時(shí)間再完善。

由于時(shí)間比較緊，寫(xiě)得很簡(jiǎn)單、粗糙、耦合，沒(méi)有通用性，僅供參考，歡迎修改完善。以下是代碼。

/*
* 仿flash新聞圖片滾動(dòng)列表
* 作者：孫繼磊  日期：2011-4-10  email: sun.j.l.studio@gmail.com 
*/
sjl_slider = {};
//初始化函數(shù)
//參數(shù)1. showDiv 要顯示新聞圖片的div
//參數(shù)2. imageDiv 要顯示的圖片新聞列表（封裝在一個(gè)個(gè)div中）
sjl_slider.init = function (showDiv, imageDiv, width) {
    sjl_slider.currentImage = 0;                //當(dāng)著顯示的圖片新聞索引
    sjl_slider.imageDiv = $('#' + imageDiv);    //總的圖片div容器
    sjl_slider.images = $('div', this.imageDiv);//圖片新聞列表
    sjl_slider.showDiv = $('#' + showDiv);      //展示區(qū)域div
    sjl_slider.count = this.images.size();      //圖片新聞數(shù)量
    sjl_slider.timer = null;                    //定時(shí)器
    //如果沒(méi)有圖片則返回
    if (sjl_slider.count == 0) return;         
    //生成數(shù)字索引區(qū)域
    this.imageIndexDiv = $('<div style="position:relative; margin-top:-60px; float:right; " id="imageSelector"></div>').insertAfter($('#' + showDiv));
    for (var i = 0; i < sjl_slider.count; i++) {
        $('<a href="#" style="background-color:silver; padding:6px; margin-left:2px; " onclick="sjl_slider.showImage(' + i + ')" > ' + (i + 1) + '</a>').appendTo(sjl_slider.imageIndexDiv);
    }
    //顯示首個(gè)圖片新聞
    sjl_slider.showImage(0);
};
//顯示一個(gè)圖片新聞
//參數(shù)：index表示要顯示的新聞列表索引
sjl_slider.showImage = function (index) {
    //將圖片新聞復(fù)制到展示區(qū)域中
    sjl_slider.showDiv.html('').append($(sjl_slider.images[index]).clone());
    //更改數(shù)字索引的樣式
    $('a', sjl_slider.imageIndexDiv).get(sjl_slider.currentImage).style.backgroundColor = 'silver';
    $('a', sjl_slider.imageIndexDiv).get(index).style.backgroundColor = '#e88';
    sjl_slider.currentImage = index;
};
//顯示下一新聞
sjl_slider.nextImage = function () { sjl_slider.showImage((sjl_slider.currentImage + 1) % sjl_slider.count); };
//啟動(dòng)自動(dòng)播放
sjl_slider.startAutoPlay = function (interval) {
    sjl_slider.timer = setInterval("sjl_slider.nextImage()", interval);
};