soChange一款多很经典的幻灯片的jQuery插件。

实例预览

引入文件

  1. <link rel="stylesheet" type="text/css" media="all" href="style.css" />
  2. <script type="text/javascript" src="jquery1.4.2.min.js"></script>
  3. <script src="jquery.soChange-min.js" type="text/javascript"></script>
复制

使用方法

  1. <div class="eachBox">
  2. <div class="changeBox_a1" id="change_1">
  3. <a href="#1" class="a_bigImg"><img src="data:images/1.jpg" width="650" height="250" alt="" /></a>
  4. <a href="#2" class="a_bigImg"><img src="data:images/2.jpg" width="650" height="250" alt="" /></a>
  5. <a href="#3" class="a_bigImg"><img src="data:images/3.jpg" width="650" height="250" alt="" /></a>
  6. <a href="#4" class="a_bigImg"><img src="data:images/4.jpg" width="650" height="250" alt="" /></a>
  7. </div>
  8. <div class="introArea">
  9. <h2>1- 默认最简易模式</h2>
复制
  1. //默认最简易模式
  2. $('#change_1 .a_bigImg').soChange();
复制

soChange参数

  1. $(obj).soChange({
  2. thumbObj:null, //导航对象,默认为空
  3. botPrev:null, //按钮上一个,默认为空
  4. botNext:null, //按钮下一个。默认为空
  5. changeType:'fade',//切换方式,可选:fade,slide,默认为fade,1.6版新增方法,详见例3-定义对象切换方式为slide
  6. thumbNowClass:'now', //导航对象当前的class,默认为now
  7. thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象,默认为true,为false时,只有鼠标点击thumbObj才切换对象
  8. slideTime:1000, //平滑过渡时间,默认为1000ms,为0或负值时,忽略changeType方式,切换效果为直接显示隐藏
  9. autoChange:true, //是否自动切换,默认为true
  10. clickFalse:true,//导航对象点击是否链接无效,默认是return false链接无效,当thumbOverEvent为false时,此项必须为true,否则鼠标点击事件冲突
  11. overStop:true,//鼠标经过切换对象时,是否停止切换,并于鼠标离开后重启自动切换,前提是已开启自动切换
  12. changeTime:5000, //对象自动切换时间,默认为5000ms,即5秒
  13. delayTime:300 //鼠标经过时对象切换迟滞时间,推荐值为300ms
  14. });
复制

soChange 即 simple object change ,对象切换插件,
充分发挥css样式的灵活性,不仅仅适用于图片相册,也适用于选项卡或文字类型的切换,
以上为此插件所有参数,基本满足了现在常见开发中遇到的平滑过渡效果,具体应用请参考以下示例。

经典实用jQuery soChange幻灯片实例演示的更多相关文章

  1. 经典的一款jQuery soChange幻灯片

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  2. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  3. Ideal-image-slider 幻灯片实例演示

    链接:http://zaixianshouce.iteye.com/blog/2316300 http://www.shouce.ren/study/api/s/jq--5733e32bf23bb-- ...

  4. jquery.validate.js实例演示

    validate是前端重要的交互手段,提升性能的同时更能提升用户操作体验,validate的实现大概有三种方式:HTML5部分支 持,validate验证框架,手动写js或ajax调用接口.使用val ...

  5. ResponsiveSlides.js 幻灯片实例演示

    在线实例 默认效果 导航和分页 缩略图 描述说明 回调函数 <div class="wrap">     <ul class="rslides" ...

  6. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  7. jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]

    jquery仿alert提示框.confirm确认对话框.prompt带输入的提示框插件实例演示 第一步:引入所需要的jquery插件文件: http://www.angelweb.cn/Inc/eg ...

  8. 锋利的jQuery幻灯片实例

    //锋利的jQuery幻灯片实例 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. 3款网页jQuery抽奖实例演示

    实例演示 实例演示 实例演示

随机推荐

  1. sqlserver 字符串最后一次的位置,截取字符串

    --reverse:字符串倒排 SUBSTRING(字段,1,len(字段)- CHARINDEX('-',REVERSE(字段)))

  2. Android之layout_alignBottom失效问题

    外面是一层RelativeLayout,前面的text和后面按钮都是设置centerParent_vertical,第二个hello是需要与第一个底部对齐,虽然设置alginBottom指向第一个he ...

  3. c# socket 解决粘包,半包

    处理原理: 半包:即一条消息底层分几次发送,先有个头包读取整条消息的长度,当不满足长度时,将消息临时缓存起来,直到满足长度再解码 粘包:两条完整/不完整消息粘在一起,一般是解码完上一条消息,然后再判断 ...

  4. java计算当前周开始日期&结束日期

    public static Date getFirstDayOfWeek(Date date) { Calendar c = new GregorianCalendar(); c.setFirstDa ...

  5. 【软件分析与挖掘】Multiple kernel ensemble learning for software defect prediction

    摘要: 利用软件中的历史缺陷数据来建立分类器,进行软件缺陷的检测. 多核学习(Multiple kernel learning):把历史缺陷数据映射到高维特征空间,使得数据能够更好地表达: 集成学习( ...

  6. php中关于js保存文件至本地的问题

    最近在搞一个livezilla的在线客服聊天的东东,客户界面要求添加一个下载聊天记录的功能.于是我就是翻看了下网上的各种关于”js保存文件至本地“的资料,发现只能在IE下通过execCommand实现 ...

  7. 移动审批App开发总结

    公司新需求要在手机上进行审批. 现在开发完成了. 总结:1.初步把公司的工作流模块做成RPC服务,公共服务可以进行调用. 2.服务分层,每个App的页面对应一个服务端的接口,作为前端控制器,用来从更低 ...

  8. MySQL慢日志监控脚本实例剖析

    公司线上的 MySQL 慢日志,之前一直没有做好监控.趁着上周空闲,我就把监控脚本写了下,今天特地把代码发出来与51博友分享一下. 针对脚本的注解和整体构思,我会放到脚本之后为大家详解. 1 2 3 ...

  9. android小技巧和注意事项

    在listView 或者 gridView 的使用中,通常不仅仅为了展现数据,更多的是操作数据.于是当控件重合在一起时,我们需要添加事件.就会出现一个问题,当点击一个控件和长按这个控件时,常常出现长按 ...

  10. IT人的自我导向型学习:开篇杂谈

    报考大学时,家人让我报的是计算机系,那个时候,普遍都认为读计算机专业的人将来不用愁找不到工作.为何得出这样的结论不得而知,但是在过去三十年中,的确有很多响当当赚了大钱的IT人在影响着我们. 顺利的考取 ...