zoukankan      html  css  js  c++  java
  • 自制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,参数说明:

    代码
    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,预览:

     11,调用:

    11.1 HTML:

    代码
         第一个例子,把图片容器类名设为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 调用示例:

    代码
    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下测试了下,修改了一点小的瑕疵,没做大改动,也没加效果

  • 相关阅读:
    hdu 4027 Can you answer these queries? 线段树
    ZOJ1610 Count the Colors 线段树
    poj 2528 Mayor's posters 离散化 线段树
    hdu 1599 find the mincost route floyd求最小环
    POJ 2686 Traveling by Stagecoach 状压DP
    POJ 1990 MooFest 树状数组
    POJ 2955 Brackets 区间DP
    lightoj 1422 Halloween Costumes 区间DP
    模板 有源汇上下界最小流 loj117
    模板 有源汇上下界最大流 loj116
  • 原文地址:https://www.cnblogs.com/walkerwang/p/1765517.html
Copyright © 2011-2022 走看看