JQ-Slide插件demo-【雷先华】-【版本1.0】-【2013-9-17】演示:


JQ-Slide插件参数说明表
参数名 参数值(默认值可以省略)  
effect scroolY(默认):垂直滚动  
scroolX:水平滚动
scroolTxt:文本垂直滚动
fade:淡出
scroolLoop:水平左右点击滚动
autoPlay true(默认): or false  
speed 动画速度时间,默认"normal",可以使用毫秒或者JQ中的fast,slow,normal  
showNum 默认为(true):切换时,时否显示数字  
timer 滚动间隔时间,默认"1000,可以使用毫秒或者JQ中的fast,slow,normal  
chooseNav JQ-slide-nav(默认):触点对象数组父级  
individuallyNav clickNav(默认):左右点击元素对象父级  
claCon JQ-slide-content(默认):滚动对象或滚动对象父级  
steps 1(默认):滚动几个  
createPage true(默认):自动创建分页  
loop true(默认):无限循环  
slideTitle slideTitle(默认):幻灯标题对象的class  



滚动一:

      $("#temp1").Slide({
                effect: "scroolY",
                speed: "normal",
                timer: 3000,
                createPage: false,
                chooseNav: 'JQ-slide-nav'
            });

滚动二:

       $("#temp2").Slide({
                effect: "scroolX",
                speed: "normal",
                timer: 3000,
                createPage: false,
                chooseNav: 'JQ-slide-nav'
            });


滚动三:

  $("#temp3").Slide({
                effect: "fade",
                speed: "normal",
                timer: 3000,
                createPage: false,
                chooseNav: 'JQ-slide-nav'
            });


滚动四:

       //无限左右滚动,不支持数字切换
      $("#temp4").Slide({
                effect: "scroolLoop",
                autoPlay: false,
                speed: "normal",
                chooseNav: 'headlNav',
                individuallyNav: 'individuallyNav',
                timer: 3000,
                steps: 2
            });


滚动五:

  • 这是公告标题的第二行
  • 这是公告标题的第三行
  • 这是公告标题的第四行
  • 这是公告标题的第五行
  • 这是公告标题的第六行
  • 这是公告标题的第七行
  • 这是公告标题的第八行
  • 这是公告标题的第9行
  • 这是公告标题的第10行
  • 这是公告标题的第11行
  • 这是公告标题的第12行
  • 这是公告标题的第一行
   $("#temp5").Slide({
                effect: "scroolTxt",
                speed: "normal",
                timer: 3000,
                steps: 1,
                chooseNav: 'JQ-slide-nav'
            });


滚动六:

  • 富森美家居大团购1

  • 富森美家居大团购2

  • 富森美家居大团购3

   $("#temp6").Slide({
                effect: "scroolY",
                speed: "normal",
                timer: 3000,
                chooseNav: 'JQ-slide-nav'
            });

滚动七:

     $("#temp7").Slide({
                effect: "fade",
                speed: "normal",
                timer: 3000,
                chooseNav: 'headlNav'
            });


滚动八,左右有限滚动:

        //不无限循环滚动
            $("#temp8").Slide({
                effect: "scroolLoop",
                autoPlay: false,
                speed: "normal",
                chooseNav: 'headlNav',
                individuallyNav: 'individuallyNav',
                timer: 3000,
                steps: 2,
                loop: false
            });


滚动九,左右有限滚动,带切换不带数字:

        //左右点击+不带数字选择
            $("#temp9").Slide({
                effect: "fade",
                speed: "normal",
                timer: 3000,
                chooseNav: 'headlNav',
                showNum: false,
                individuallyNav: 'individuallyNav',
            });

滚动十:

   //左右点击+数字选择
            $("#temp10").Slide({
                effect: "fade",
                speed: "normal",
                timer: 3000,
                chooseNav: 'headlNav',
                individuallyNav: 'individuallyNav',
            });