当前位置: 首页 > news >正文

自制jQuery图片切换插件ImgSlider v1.0

之前写过一个让图片幻灯显示的效果,费了很大的劲,考虑到有很多地方有这样的需求,不如把它封装起来,再加之是自己开发的,最符合自己的需求,磕磕碰碰几天之后,ImgSlider插件诞生了,说明如下:

1,没有做复杂的效果,所有的效果都是从右往左移动。

  1.1多种动画效果已实现,发布在google code,

2,自带预览图功能,半透明

3,带额外的当前图片描述功能,与图片展示时一同出现,即同时有图片的title,还有图片的简单介绍,半透明动态浮出。见例子。

4,关闭预览图,则会出现数字导航

5,这是花时间改造最多的,就是同一个页面可以有多个元素同时使用此插件,并且各自切换,不相干扰

  5.1代价就是,所有选择器都不是ID,而是class名,你确定一个页面只放一个的话,可以把我的插件弄回去自己稍微改一下

6,由于改造麻烦,故图片做的不是链接,点击图片要跳转的话,是写在图片的onclick事件里面

  6.1因为每张图片移动的位置都是精确计算的,所以五张图必须连续,没有间隔,很多IDE把代码缩进处理成了浏览器能识别的空白,这样会完全破坏效果,因此应像本例中那样,几张图片的代码连续拼出,不带空格,此外,建立真正发布的时候,这段代码由后台拼出,这样完全避免产生空白的可能

7,需要自定义的地方:

  7.1 一个DIV包含需要的图片

  7.2一个DIV包含上面那个DIV,使用这个元素调用方法。

  7.3图片除title外的详细说明,需要自定义一个名为cont的属性,如<img src=".." alt="" title="title" cont="description" />

8,预览图及数字导航的样式没写在插件里,因为根据情况不同,它们会呈现不同的样式,千差万别,请自行根据实际情况写这两个导航控件的CSS。

9,参数说明:

ContractedBlock.gif ExpandedBlockStart.gif 代码

   
1 wrapName: ' imgb ' , // 窗口内唯一包裹所有幻灯图片的div的类名
2   wrapWidth: 351 , // 容器宽度
3   wrapHeight: 396 , // 容器高度
4 speed: 1000 , // 切换速度
5 interval: 5000 , // 切换间隔
6 arrPosition: - 403 , // 预览图箭头初始位置
7 hidePreview: false , // 隐藏预览图,隐藏后会显示数字导航
8 hideCaptial: false // 隐藏标题/介绍

10,预览:

2010062521393975.jpg

 11,调用:

11.1 HTML:

ContractedBlock.gif ExpandedBlockStart.gif 代码
     第一个例子,把图片容器类名设为imgb,则无需传递此参数
< div id ="fla_focus" >
< div class ="imgb" >< img target ="_blank" onclick ="location.href='#'" cont ="这是一个很好玩很火爆的活动哦,大家快来参加吧!!!参与还有礼品拿!" title ="第一个推荐活动" alt ="" src ="img/1.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第二个很好玩很火爆的活动哦,大家快来参加吧!!!参与还有礼品拿!" title ="第二个推荐活动" alt ="" src ="img/2.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第三个很好玩很火爆的活动哦,大家快来参加吧!!!参与还有礼品拿!" title ="第三个推荐活动" alt ="" src ="img/3.jpg" />< img target ="_blank" onclick ="location.href='#'" cont ="这第四个很好玩很火爆的活动哦,大家快来参加吧!!!参与还有礼品拿!" title ="第四个推荐活动" alt ="" src ="img/4.jpg" >< img target ="_blank" onclick ="location.href='#'" cont ="这第五个很好玩很火爆的活动哦,大家快来参加吧!!!参与还有礼品拿!" title ="第五个推荐活动" alt ="" src ="img/5.jpg" />
</ div >
</ div >
第二个例子,自定义类别,需在参数中传入
< div id ="slide2" >
< div class ="myname" >< img title ="aaa" src ="images/01.jpg" alt ="" />< img title ="aaa" src ="images/02.jpg" alt ="" />< img title ="aaa" src ="images/03.jpg" alt ="" />< img title ="aaa" src ="images/04.jpg" alt ="" />< img title ="aaa" src ="images/05.jpg" alt ="" /></ div >
</ div >
</ div >

11.2 调用示例:

ContractedBlock.gif ExpandedBlockStart.gif 代码

   
1 $( function (){
2 $( " #fla_focus " ).ImgSlider(); // 使用默认值(图片容器类名应为imgb,否则必须传入wrapName属性)
3 $( " #slide2 " ).ImgSlider({
4 hidePreview: true , // 隐藏预览
5 hideCaptial: true , // 隐藏标题
6 wrapWidth: 696 , // 自定义宽度
7 wrapHeight: 241 , // 自定义高度
8 interval: 3000 , // 自定义切换间隔
9 wrapName: " myname " // 自定义图片容器的class名
10 });
11 });

11.3 CSS(相当于,CSS里面规定的类名,是在插件里面定好的,你不能自定义,你只要拷回代码)

11.4 JS(由于写这篇文章的过程中,把文件传了上去,故不再把代码贴出来,想体验的,就下载试试吧)

12,下载示例 另,以后的更新发布在google code上:https://imagesliderbywalker.googlecode.com/svn/trunk/

  或:http://code.google.com/p/imagesliderbywalker/downloads/list

13,

附注:由于打包匆忙,CSS有大量没删掉的地方,但已经注释了,为了保持代码简洁,请自行删掉,其实起作用的就那7行。

要发布在网站的话,请把插件自行压缩一下

有其他问题请回复或邮件我

 

14,v1.1.1更新在google code,主要在真正的ie6下测试了下,修改了一点小的瑕疵,没做大改动,也没加效果

转载于:https://www.cnblogs.com/walkerwang/archive/2010/06/25/1765517.html

相关文章:

  • CORS简介
  • 《Android/OPhone 开发完全讲义》目录
  • mac pycharm快捷键
  • asp.net architecture
  • Exchange 2010 之:1—DAG
  • 什麽才是考驗人生的跟本
  • 「【算法进阶0x30】数学知识A」作业简洁总结
  • 「线性基」学习笔记and乱口胡总结
  • F#教程:+运算符也是函数
  • 一些想法
  • C语言之数据的存储类别
  • 算法的基本概念
  • 基于GPS数据建立隐式马尔可夫模型预测目的地
  • 转载 线程池之ThreadPool类与辅助线程 - 第二篇
  • 常见异常
  • JavaScript-如何实现克隆(clone)函数
  • SegmentFault for Android 3.0 发布
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • 【node学习】协程
  • 30秒的PHP代码片段(1)数组 - Array
  • conda常用的命令
  • css属性的继承、初识值、计算值、当前值、应用值
  • egg(89)--egg之redis的发布和订阅
  • Golang-长连接-状态推送
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • Linux快速复制或删除大量小文件
  • magento2项目上线注意事项
  • Markdown 语法简单说明
  • Redis 懒删除(lazy free)简史
  • SpingCloudBus整合RabbitMQ
  • 阿里云前端周刊 - 第 26 期
  • 简单易用的leetcode开发测试工具(npm)
  • 如何进阶一名有竞争力的程序员?
  • 推荐一个React的管理后台框架
  • 终端用户监控:真实用户监控还是模拟监控?
  • d²y/dx²; 偏导数问题 请问f1 f2是什么意思
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • AI算硅基生命吗,为什么?
  • python最赚钱的4个方向,你最心动的是哪个?
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • ​香农与信息论三大定律
  • ###51单片机学习(2)-----如何通过C语言运用延时函数设计LED流水灯
  • #QT(智能家居界面-界面切换)
  • #前后端分离# 头条发布系统
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • $refs 、$nextTic、动态组件、name的使用
  • (10)STL算法之搜索(二) 二分查找
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (windows2012共享文件夹和防火墙设置
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理 第13章 项目资源管理(七)
  • (译) 函数式 JS #1:简介