收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4302|回复: 5

javascript整合三种焦点图

[复制链接]
发表于 2009-12-29 18:02:46 | 显示全部楼层 |阅读模式
因为门户网站用到很多焦点图,每个频道的需求又不一样,所以想到把这三种典型的焦点图整合到一个对象里。只公用一个compressed.js,也是参考别人的思想。
1、带数字的焦点图
a.jpg

  1. var slideshow=new TINY.slideshow("slideshow");
  2. slideshow.auto=true;
  3. slideshow.sctollTex=true;//文本信息是否停止弹出动作
  4. slideshow.speed=4;
  5. slideshow.link="linkhover";
  6. slideshow.info="information";
  7. slideshow.thumbs="slider";
  8. slideshow.scrollSpeed=4;
  9. slideshow.spacing=5;//缩略图间距
  10. slideshow.numClass="back";//数字默认样式名
  11. slideshow.numCurClass="currentBack";//数字当前样式名
  12. slideshow.init("slideshow","image","imgprev","imgnext","imglink");
复制代码

2、带缩略图的焦点图
b.jpg
  1. var slideshow=new TINY.slideshow("slideshow");
  2. slideshow.auto=true;
  3. slideshow.sctollTex=true;//文本信息是否停止弹出动作
  4. slideshow.speed=4;
  5. slideshow.link="linkhover";
  6. slideshow.info="information";
  7. slideshow.thumbs="slider";
  8. slideshow.scrollSpeed=4;
  9. slideshow.spacing=5;//缩略图间距
  10. slideshow.numClass="back";//数字默认样式名
  11. slideshow.numCurClass="currentBack";//数字当前样式名
  12. slideshow.init("slideshow","image","imgprev","imgnext","imglink");
复制代码

3、带缩略图并且可以滚动的焦点图
可以看http://beauty.ixinwei.com/
  1. var slideshow=new TINY.slideshow("slideshow");
  2. slideshow.auto=true;
  3. slideshow.speed=4;
  4. slideshow.link="linkhover";
  5. slideshow.info="information";
  6. slideshow.thumbs="slider";
  7. slideshow.left="slideleft";
  8. slideshow.right="slideright";
  9. slideshow.scrollSpeed=4;
  10. slideshow.spacing=5;
  11. slideshow.active="red";
  12. slideshow.init("slideshow","image","imgprev","imgnext","imglink");
复制代码


下载地址:http://www.ixinwei.com/images/js/focuse.rar

[[i] 本帖最后由 chesihui 于 2009-12-30 16:07 编辑 ]
 楼主| 发表于 2009-12-30 16:09:08 | 显示全部楼层
自己顶一下吧!
回复 支持 反对

使用道具 举报

发表于 2009-12-30 17:19:21 | 显示全部楼层
感谢楼主分享,不过这种能不能实现动态调用?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-12-30 17:40:40 | 显示全部楼层
原帖由 [i]gp02agundam 于 2009-12-30 17:19 发表
感谢楼主分享,不过这种能不能实现动态调用?

可以动态呀。这些是调用的数据
  1. <ul id="slideshow">
  2.       <li>
  3.         <h3>TinySlideshow </h3>
  4.         <span>focus/imgSmal02.jpg</span> <a href="http://baidu.com" target="_blank"></a>
  5.       </li>
  6.       <li>
  7.         <h3>Sea Turtle</h3>
  8.         <span>focus/bigImg01.jpg</span> <a href="http://baidu.com" target="_blank"></a>
  9.       </li>
  10.       <li>
  11.         <h3>Red Coral</h3>
  12.         <span>focus/imgSmal03.jpg</span> <a href="#"></a>
  13.       </li>
  14.       <li>
  15.         <h3>asdasdasdasd</h3>
  16.         <span>focus/imgSmal02.jpg</span> <a href="#"></a>
  17.       </li>
  18.       <li>
  19.         <h3>bbbbbbbbbbbbbbbbbbb</h3>
  20.         <span>focus/imgSmal05.jpg</span> <a href="#"></a>
  21.       </li>                    
  22.     </ul>
复制代码
回复 支持 反对

使用道具 举报

发表于 2009-12-31 10:13:57 | 显示全部楼层
广告无所不在
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-1-3 12:28:39 | 显示全部楼层
原帖由 [i]qiang5233 于 2009-12-31 10:13 发表
广告无所不在

-_!! 气愤
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-2 05:35 , Processed in 0.115917 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表