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

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30379973

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/FoundationSoft/archive/2011/04/10/2011893.html

版权

今天做一小程序，其中首页上用户让做一个滚动图片新闻，这个东西具体叫什么名字我也不清楚，就是经常在网站上看到的，大都是用flash做的那个类似相册的东西。

我先是从网上找了一个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; " οnclick="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);
};

效果图如下。