• jQuery滚动插件 (轮播)


    DEMO

  • 可滑动任何HTML内容
  • 上下页导航箭头
  • 导航tab页支持无限动态创建
  • 可对导航文字进行自定义
  • 支持可暂停的自动播放
  • 每一个滚动项均有#标签方便连接至任意特定项
  • 支持无限连续滚动
  • 支持同一页面多个滚动效果
  • 可选的鼠标滑过暂停滚动效果
  • 支持从普通链接直接跳转至相应的滚动项(意思是页面上的文本链接点击后直接滑动至该滚动项)

    该插件的英文详细介绍看这里:http://css-tricks.com/anythingslider-jquery-plugin/

    使用介绍&参数说明

    $(’.anythingSlider’).anythingSlider({
            easing: “swing”,                // Anything other than “linear” or “swing” requires the easing plugin

            autoPlay: true,                 // 是否自动播放
            startStopped: false,            // 如果选择自动播放,这个配置让插件开始时时停止的
            delay: 3000,                    // 自动切换时间

            animationTime: 600,             // 过渡效果持续时间
            hashTags: true,                 // 是否让#标签来变化当前url

            buildNavigation: true,          // 是否添加导航tab
            pauseOnHover: true,             // 是否在鼠标hover时暂停滚动

            startText: “Start”,             // 开始按钮文字
            stopText: “Stop”,               // 结束按钮文字
            navigationFormatter: null       // 自定义的文字格式化函数名,详细使用可参照demo源码
    });

     自定义使用

    • 添加删除滚动项:仅需添加或删除<div class=”wrapper”>内的<li>标签即可。
    • 修改滚动框大小:如果你需要将滚动框的大小从660px改为580px,你需要修改css文件中.anythingSlider ul li 为580px,把.anythingSlider .wrapper 的宽度改为 580px,将.anythingSlider 的width减少100px 为660px。
    • 直接连接至滚动框:

      $(”#slide-jump”).click(function(){
          $(’.anythingSlider’).anythingSlider(6);
      });

  • 转自http://jsssc.cn/

  • 相关阅读:
    Flex Charting: Format Your X And Y Axis
    Flex Charting: Format Your Data Tips The Same As Your Axes
    高质量的开源Flex UI组件库项目(FlexLib)
    今天学习Flex3.2嵌入图片,值得说道的是如何嵌入scale9 缩放的图像
    zz[as3 hack技术]垃圾回收机强制执行
    Spark Skinning (including SkinnableComponent) Functional and Design Specification
    Flex DataTransforms类的理解
    关于AS3中弱引用的一点理解
    flex 元字符
    收集整理了一些AS3中常用到的公式
  • 原文地址:https://www.cnblogs.com/toto/p/1614743.html
  • Copyright © 2020-2023  润新知