您现在的位置： 365建站网 > 365文章 > 用jquery做的仿flash滚动图片新闻效果

用jquery做的仿flash滚动图片新闻效果

文章来源：365jz.com 点击数：911 更新时间：2011-04-10 23:14 参与评论

我先是从网上找了一个easyslide控件，基本还算是好用，可以忽然发现它与jquery 1.4.1不兼容，调试了半天也没弄好。又找网上找其他组件，花了大约一个小时也没有找到合适的。干脆自己写一个简单的吧，能够满足当前的使用需求即可以，以后有时间再完善。

由于时间比较紧，写得很简单、粗糙、耦合，没有通用性，仅供参考，欢迎修改完善。以下是代码。

/*
* 仿flash新闻图片滚动列表
* 作者：孙继磊  日期：2011-4-10  email: sun.j.l.studio@gmail.com 
*/
sjl_slider = {};
//初始化函数
//参数1. showDiv 要显示新闻图片的div
//参数2. imageDiv 要显示的图片新闻列表（封装在一个个div中）
sjl_slider.init = function (showDiv, imageDiv, width) {
    sjl_slider.currentImage = 0;                //当着显示的图片新闻索引
    sjl_slider.imageDiv = $('#' + imageDiv);    //总的图片div容器
    sjl_slider.images = $('div', this.imageDiv);//图片新闻列表
    sjl_slider.showDiv = $('#' + showDiv);      //展示区域div
    sjl_slider.count = this.images.size();      //图片新闻数量
    sjl_slider.timer = null;                    //定时器
    //如果没有图片则返回
    if (sjl_slider.count == 0) return;         
    //生成数字索引区域
    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);
    }
    //显示首个图片新闻
    sjl_slider.showImage(0);
};
//显示一个图片新闻
//参数：index表示要显示的新闻列表索引
sjl_slider.showImage = function (index) {
    //将图片新闻复制到展示区域中
    sjl_slider.showDiv.html('').append($(sjl_slider.images[index]).clone());
    //更改数字索引的样式
    $('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); };
//启动自动播放
sjl_slider.startAutoPlay = function (interval) {
    sjl_slider.timer = setInterval("sjl_slider.nextImage()", interval);
};