zoukankan      html  css  js  c++  java
  • 使用JQuery.slideBox实现图片滚动效果

    1.下载JQuery.slideBox和jquery插件,并引用

    <link href="css/jquery.slideBox.css" rel="stylesheet" />
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.slideBox.min.js"></script>

    下载链接

    2.设置图片的html的div的ID为如下形式

    <div id="demo1" class="slideBox">
            <ul class="items">
                <li><a href="#" title="标题一"><img src="img/1.jpg"></a></li>
                <li><a href="#" title="标题二"><img src="img/2.jpg"></a></li>
                <li><a href="#" title="标题三"><img src="img/3.jpg"></a></li>
                <li><a href="#" title="标题四"><img src="img/4.jpg"></a></li>
                <li><a href="#" title="标题五"><img src="img/5.jpg"></a></li>
            </ul>
        </div>

    3.设置JQuery.slideBox的一些属性设置。有三种设置的案例,可以参考.

        <script type="text/javascript">
            $(function() {
                $('#demo1').slideBox();
                $('#demo2').slideBox({
                    direction: 'top',//left,top#方向
                    duration: 0.3,//滚动持续时间,单位:秒
                    easing: 'linear',//swing,linear//滚动特效
                    delay: 5,//滚动延迟时间,单位:秒
                    startIndex: 1//初始焦点顺序
                });
                $('#demo3').slideBox({
                    duration: 0.3,//滚动持续时间,单位:秒
                    easing: 'linear',//swing,linear//滚动特效
                    delay: 5,//滚动延迟时间,单位:秒
                    hideClickBar: false,//不自动隐藏点选按键
                    clickBarRadius: 10
                });
                $('#demo4').slideBox({
                    hideBottomBar: true//隐藏底栏
                });
            })
        </script>

    说明:默认的样式为,左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-只方不圆)5px(以上各项为默认设置值)

  • 相关阅读:
    HTTP断点续传 规格严格
    Java Shutdown 规格严格
    linux 命令源码 规格严格
    JTable调整列宽 规格严格
    linux 多CPU 规格严格
    Hello can not find git path 规格严格
    Kill 规格严格
    拜拜牛人 规格严格
    Swing 规格严格
    Debugging hangs in JVM (on AIX but methodology applicable to other platforms) 规格严格
  • 原文地址:https://www.cnblogs.com/shinelhui/p/3468832.html
Copyright © 2011-2022 走看看