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

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

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

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

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

</>code

  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);
    };

 

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

发表评论 (921人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号