jquery - 任何列表滚动器消失

时间:2015-07-08 08:10:05

标签: jquery html

我正在使用jquery.als插件。当我启用autoscroll时,它会在完全滚动后消失。这里是示例:(您也可以从网站下载示例并启用自动滚动并将间隔设置为500以查看问题)

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/CSSreset.min.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/als_demo.css" />
        <link rel="icon"          href="images/favicon.ico" type="image/x-icon" />
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
        <meta name="robots" content="index,follow" />
        <meta name="keywords" content="jQuery plugin, jQuery scroller, list jQuery, jQuery lists, css3, html5, jQuery" />
        <meta name="description" content="any list scroller demo - jQuery scrolling plugin by musings.it to scroll any kind of list with any content - musings.it web design and development - Bergamo Italy" />    
        <meta name="author" content="Federica Sibella - musings.it" />
        <meta name="geo.placename" content="via Generale Alberico Albricci 1, 24128 Bergamo, Italy">
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.als-1.7.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() 
            {
                $("#lista1").als({
                    visible_items: 4,
                    scrolling_items: 2,
                    orientation: "horizontal",
                    circular: "yes",
                    autoscroll: "yes",
                    interval: 50,
                    speed: 500,
                    easing: "linear",
                    direction: "right",
                    start_from: 0
                });


                //logo hover
                $("#logo_img").hover(function()
                {
                    $(this).attr("src","images/als_logo_hover212x110.png");
                },function()
                {
                    $(this).attr("src","images/als_logo212x110.png");
                });

                //logo click
                $("#logo_img").click(function()
                {
                    location.href = "http://als.musings.it/index.php";
                });

                $("a[href^='http://']").attr("target","_blank");
                $("a[href^='http://als']").attr("target","_self");
            });
        </script>
    </head>
    <body>
        <header>
            <div id="logo">
                <img id="logo_img" src="images/als_logo212x110.png" alt="als logo" title="als logo" />
                <h1>Any List Scroller <span>demo</span></h1>
                <br class="esc" />
                <h2>Do you want to scroll a list? ALS it!</h2>
            </div>
        </header>   
        <section id="content">
            <h2>Demo 1</h2>
            <p>This list is composed by classical list elements &lt;ul&gt; e &lt;li&gt;</p>
            <div id="lista1" class="als-container">
                <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
                <div class="als-viewport">
                    <ul class="als-wrapper">
                        <li class="als-item"><img src="images/als-images/calculator.png" alt="calculator" title="calculator" />calculator</li>
                        <li class="als-item"><img src="images/als-images/light_bulb.png" alt="light bulb" title="light bulb" />light bulb</li>
                        <li class="als-item"><img src="images/als-images/card.png" alt="card" title="card" />card</li>
                        <li class="als-item"><img src="images/als-images/chess.png" alt="chess" title="chess" />chess</li>
                        <li class="als-item"><img src="images/als-images/clock.png" alt="alarm clock" title="alarm clock" />alarm clock</li>
                        <li class="als-item"><img src="images/als-images/cut.png" alt="scissors" title="scissors" />scissors</li>
                        <li class="als-item"><img src="images/als-images/heart.png" alt="heart" title="heart" />heart</li>
                        <li class="als-item"><img src="images/als-images/map.png" alt="pin" title="pin" />pin</li>
                        <li class="als-item"><img src="images/als-images/mobile_phone.png" alt="mobile phone" title="mobile phone" />mobile phone</li>
                        <li class="als-item"><img src="images/als-images/camera.png" alt="camera" title="camera" />camera</li>
                        <li class="als-item"><img src="images/als-images/music_note.png" alt="music note" title="music note" />music note</li>
                        <li class="als-item"><img src="images/als-images/protection.png" alt="umbrella" title="umbrella" />umbrella</li>
                        <li class="als-item"><img src="images/als-images/television.png" alt="television" title="television" />television</li>
                    </ul>
                </div>
                <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
            </div>
        </section>
    </body>
</html>

0 个答案:

没有答案