网站首页 文章专栏 Jssor轮播图
Jssor轮播图
编辑时间:2017-11-01 22:53:58 作者:lizhi 浏览量:1023
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Image Slider - Jssor Slider</title>
</head>
<body>

    <script src="https://cdn.bootcss.com/jssor-slider/26.3.0/jssor.slider.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jssor_1_slider_init = function() {
            var jssor_1_options = {
              $AutoPlay: 1,
              $Align:0,
              //$Idle: 100,
              $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$
              },
              $BulletNavigatorOptions: {
                $Class: $JssorBulletNavigator$
              }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*#region responsive code begin*/


            function ScaleSlider() {
                var containerElement = jssor_1_slider.$Elmt.parentNode;
                var containerWidth = containerElement.clientWidth;

                if (containerWidth) {

                    var expectedWidth = Math.min( containerWidth, containerWidth);

                    jssor_1_slider.$ScaleWidth(expectedWidth);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();

            $Jssor$.$AddEvent(window, "load", ScaleSlider);
            $Jssor$.$AddEvent(window, "resize", ScaleSlider);
            $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
            /*#endregion responsive code end*/
        };
    </script>
    <style>
        .jssor-box{position:relative;overflow:hidden;visibility:hidden;}
        .jssor-slider{cursor:default;position:relative;top:0px;left:0px;width:500px;height:380px;}
        .pagination{width:10px;height:10px; background:#000;border-radius: 100%;}
        .pagination.paginationav{  background: #fff; }
        .pagination-box{position:absolute;bottom:12px;right:12px;}
    </style>
    <div id="jssor_1" class="jssor-box">
        <div data-u="slides"  class="jssor-slider">
            <div>
                <img src="https://img.alicdn.com/simba/img/TB1a3K1njihSKJjy0FeSuvJtpXa.jpg" />
            </div>
            <div>
                <img src="https://img.alicdn.com/tfs/TB18mZfXNrI8KJjy0FpXXb5hVXa-520-280.jpg_q90_.webp" />
            </div>
        </div>
        <!-- Bullet Navigator -->
        <div data-u="navigator" class="pagination-box"  data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="pagination" ></div>
        </div>

    </div>

    <script type="text/javascript">jssor_1_slider_init();</script>
</body>
</html>
来说两句吧
最新评论