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

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

文章来源:365jz.com     点击数:872    更新时间: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);
};

 

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (872人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------