Question

很少的事情：我认为有一个JQuery冲突，因为导航栏不会加载或滑块不能工作我无法让jssor滑块以100％的宽度和高度工作。它仅在我以像素为单位设置w和h时才有效。以下是该网站的标题：

$gantry->addScript(array(
                'tooltips.js',
                'jquery.preloader.js',
                'touch.gallery.js',
                'jquery.isotope.min.js',
                'scripts.js'
            ));
        ?>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                /*Image Preloader*/
                $("span.catItemImage, span.itemImage, span.userItemImage, span.genericItemImage").preloader({
                    iconURL:"<?php echo $gpath.'/images/system/loading.gif' ;?>"
                });
            });
        </script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="templates/theme1514/js/jssor.slider.mini.js"></script>

        <script>
                $(document).ready(function ($) {
                                var options = {
                                $AutoPlay: true,
                            $DragOrientation: 1,                               
                            $SlideDuration: 600,                                

                            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                                $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                                $Steps: 1,                                       //[Optional] Steps to go for each navigation request, default value is 1
                                $Scale: false
                            }
                        };
                    var jssor_slider1 = new $JssorSlider$('rt-slider', options);



                });
        </script>

这是滑块div：

<?php if ($class=="homepage") :?>
<div id="rt-slider" style="overflow:hidden; width:"100%"; height:"100%";">
<div u="slides" style="cursor: move; position: absolute; left:0px; top:0px; overflow: hidden;">
<div><img u="image" src="templates/theme1514/images/image1.jpg" /></div>
<div><img u="image" src="templates/theme1514/images/image2.jpg" /></div>
<div><img u="image" src="templates/theme1514/images/image3.jpg" /></div>

</div>

<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 14 css */
/*
.jssora14l              (normal)
.jssora14r              (normal)
.jssora14l:hover        (normal mouseover)
.jssora14r:hover        (normal mouseover)
.jssora14ldn            (mousedown)
.jssora14rdn            (mousedown)
*/
.jssora14l, .jssora14r, .jssora14ldn, .jssora14rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(templates/theme1514/images/a14.png) no-repeat;
overflow:hidden;
}
.jssora14l { background-position: -15px -35px; }
.jssora14r { background-position: -75px -35px; }
.jssora14l:hover { background-position: -135px -35px; }
.jssora14r:hover { background-position: -195px -35px; }
.jssora14ldn { background-position: -255px -35px; }
.jssora14rdn { background-position: -315px -35px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora14l" style="width: 30px; height: 50px; top: 123px; left: 0px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora14r" style="width: 30px; height: 50px; top: 123px; right: 0px">
</span>
<!-- Arrow Navigator Skin End -->

</div>
<div class="clear"></div>
<?php endif; ?>

现在正在挖掘这个并搜索大约5个小时的答案。我在面前错过了一些非常大的东西吗？网站：www.xabre.net/tempbw

Answer 1

jssor滑块的大小应始终以像素为单位指定。但您可以按实例将滑块缩放到任意大小。$ ScaleWidth

<script>
    $(document).ready(function ($) {


        var options = {
            $AutoPlay: true,
            $DragOrientation: 1,                               
            $SlideDuration: 600,                                

            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 1,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1,                                       //[Optional] Steps to go for each navigation request, default value is 1
                $Scale: false
            }
        };
        var jssor_slider1 = new $JssorSlider$('rt-slider', options);

        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var bodyWidth = document.body.clientWidth;
            if (bodyWidth)
                jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();

        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end

    });
</script>

参考'jssor.slider.fullpack \ demos-jquery \ full-width-slider.source.html'

jssor - 某种类型的JQuery冲突？

1 个答案: