博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery插件之图片轮播插件–slideBox
阅读量:4286 次
发布时间:2019-05-27

本文共 1239 字,大约阅读时间需要 4 分钟。

来源:

今天偶然发现了一个比较好用的图片轮播插件—slideBox

先看看效果:

代码如下

1: 
2: 
3: 
4: 
5: slideBox轮播插件
6: 
7: 
8: 
9: 
10: 
一、左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-只方不圆)5px(以上各项为默认设置值)
11: 
12:   
    13:     
  • 14:     
  • 15:     
  • 16:   
    17: 
    18: 
    二、上下轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第2张,点选按键自动隐藏
    19: 
    20:   
      21:    
    • 22:     
    • 23:     
    • 24:   
      25: 
      26: 
      27: 
      28: 
      29: jQuery(function($){
      30:     $('#demo1').slideBox();
      31:     $('#demo2').slideBox({
      32:         direction : 'top',//left,top#方向
      33:         duration : 0.3,//滚动持续时间,单位:秒
      34:         easing : 'linear',//swing,linear//滚动特效
      35:         delay : 5,//滚动延迟时间,单位:秒
      36:         startIndex : 1//初始焦点顺序
      37:     });
      38: });
      39: 
      40: 
      41: 

      适用浏览器:IE8、360、FireFox、Chrome等浏览器

      42: 

      来源:淡忘~浅思

      43: 
      44: 
      45: 

      在代码中引入了slideBox.css和slideBox.js文件。demo1用的是默认的设置,demo2是自定义设置。

      slide的默认设置如下

      1: //默认参数
      2:       var defaults = {
      3:           direction : 'left',//left,top
      4:           duration : 0.6,//unit:seconds
      5:           easing : 'swing',//swing,linear
      6:           delay : 3,//unit:seconds
      7:           startIndex : 0,
      8:           hideClickBar : true,
      9:           clickBarRadius : 5,//unit:px
      10:           hideBottomBar : false,
      11:           width : null,
      12:           height : null
      13:       };

      转载地址:http://swtgi.baihongyu.com/

      你可能感兴趣的文章
      C语言socket编程(九)listen()
      查看>>
      C语言socket编程(十)a'c'cept()
      查看>>
      C语言socket编程(十一)CFNetworking框架/CFSocket////CFStream属于CoreFoundation
      查看>>
      java 基础IO/inputStream/outputStream/buffInputStrem/buffOutputStrem
      查看>>
      java 多线程一
      查看>>
      java基础/IO流/、序列化和反序列化、浅复制和深复制
      查看>>
      java基础/IO流(二)
      查看>>
      java/多线程二
      查看>>
      java/设计原则
      查看>>
      java/GUI 编程
      查看>>
      java/socket编程
      查看>>
      java/反射/JDK新特性
      查看>>
      java/AJAX
      查看>>
      java/AJAX/JSON/XML/JQUERY
      查看>>
      iOS加载控制器的三种方式/loadNibName与initwithNibName的区别
      查看>>
      java/tomcat /http协议
      查看>>
      java/severelet
      查看>>
      iOS编译问题的N种可能
      查看>>
      java/session/cookie/jsp(一)
      查看>>
      java/jsp/cookie/session/EL\context和request的生命周期(二)
      查看>>