Jquery skippr 幻灯片

最新推荐文章于 2024-07-10 21:05:14 发布

千里草竹

最新推荐文章于 2024-07-10 21:05:14 发布

阅读量287

点赞数

本文链接：https://blog.csdn.net/u012848709/article/details/80385994

版权

楔子

一个简单易用的jquery 幻灯片插件 skippr
https://github.com/austenpayan/skippr

简单实用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="js/skipper/skippr.css" />
        <title></title>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/skipper/skippr.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        #container {
            width: 600px;
        }

        #theTarget {
            height: 400px;
        }
    </style>
    <body>
        <div id="row">
            <h1 class="page-header">
                幻灯片
            </h1>
            <div class="col-md-6 col-md-offset-3">

                <div id="container">
                    <div id="theTarget">
                        <img src="img/jpa/12b01.jpg" alt="" />
                        <img src="img/jpa/12b04.jpg" alt="" />
                        <img src="img/jpa/12b05.jpg" alt="" />
                        <img src="img/jpa/12b06.jpg" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            $("#theTarget").skippr({
                transition: 'fade',
                speed: 1000,
                autoPlay: true,
                /*childrenElementType:'img',*/
                autoPlayDuration: 1500
            });
        });
        $('#theTarget img').click(function() {
            alert(1);
            location = $(this).attr('src');
        });
    </script>

</html>

**Note: The container element must have a specified width and height, and position other than static to work properly. 给定container 宽和高

注意

如果内容是<div id="theTarget"> <img src="img/jpa/12b01.jpg" alt="" /> <img src="img/jpa/12b04.jpg" alt="" /> <img src="img/jpa/12b05.jpg" alt="" /> <img src="img/jpa/12b06.jpg" alt="" /> </div>
则参数设置了 childrenElementType:'img'
会变为div

使用时可以不设置 childrenElementType