• 欢迎访问好资源,这里会在第一时间更新最新最好的资源给您,如果您有好的资源、文章,可投稿。如有其他需要请联系 QQ 点我注册
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏好资源吧~ 点我注册

jQuery 图片翻页(幻灯片)效果小插件: bxSlider

JavaScript itsmalldog 5年前 (2014-10-25) 3572次浏览 已收录 5个评论 扫描二维码
本文最后更新于2014年10月25日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
文章目录[隐藏]
  • 要实现上面的效果,我么加载 jQuery 和 bxSilder 的代码之后,还需要在页面的 head 中添加如下的 jQuery 代码:
    $(document).ready(function(){    $('#example3').bxSlider({        mode: 'fade',         speed: 3000,         next_text: '下一张',         prev_text: '上一张',         width: 307,         wrapper_class: 'example3_container'     });});

     

    其他的效果请查看 bxSlider 的演示页面

    bxSlider 详细配置参数

    bxSlider 有以下参数可以进行配置:

    • mode: 模式,可以指定 ‘slide’, ‘fade’, ‘ticker’ 这三种模式。
    • speed: 速度,变换的时间,单位是毫秒。
    • auto: 是否自动变换。
    • controls: 用于添加按钮来进行手动变化,(可以和 auto 混合一起使用)。
    • pause: 两次变换之间停留的时间(在 auto 为 true 才有效)。
    • width: 容器元素的宽度(单位是像素)。
    • prev_text: 上一个按钮的问本。
    • next_text: 下一个按钮的文本。
    • prev_img: 上一个按钮的图片。
    • next_img: 下一个按钮的图片。
    • ticker_direction: 滚动的方向,模式为 ‘ticker’ 才有效。
    • wrapper_class: 容器元素的 class 名字。

下载:bxSlider


好资源 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明jQuery 图片翻页(幻灯片)效果小插件: bxSlider
喜欢 (16)
[捐赠网站,支持好资源!]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 试一下先
    lay1234562016-05-31 18:57 回复 Windows 7 | Chrome 50.0.2661.87
  2. 试下先
    pureuser2016-06-27 12:01 回复 Windows 10 | Chrome 50.0.2661.102
  3. 正好试用下,感谢!
    myiting2016-07-01 07:56 回复 Windows 7 | 搜狗浏览器 2.X
  4. 这个好,喜欢
    winken2016-09-21 21:36 回复 Windows 7 | Chrome 45.0.2454.101
  5. 演示看不到啊亲
    素材火2017-02-03 19:35 回复 Windows 7 | Firefox浏览器 32.0