子弹和箭头导航没有显示在jssor滑块中

时间:2016-05-26 07:33:21

标签: jquery html css jssor

你好我在使用jssor滑块,我已经在我的主页中实现了代码,但它不显示导航器子弹和导航器箭头,当我检查子弹div时,它出现在左上角我似乎无法放置它,即使我把它放在底部,它没有显示子弹,当我独立运行这个滑块,它的工作原理,有人请告诉我这里的问题是什么。我添加了$ chancetoshow:2但它仍然无效。这是滑块的代码

home.php

<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
 <!-- Loading Screen -->
 <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
     <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
     <div style="position:absolute;display:block;background:url('<?php echo base_url("assets");?>/slider_imgs/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
 </div>
 <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
     <div data-p="225.00" style="display: none;">
         <img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/red.jpg" />
         <div style="position: absolute; top: 30px; left: 30px; width: 480px; height: 120px; font-size: 50px; color: #ffffff; line-height: 60px;">TOUCH SWIPE SLIDER</div>
         <div style="position: absolute; top: 300px; left: 30px; width: 480px; height: 120px; font-size: 30px; color: #ffffff; line-height: 38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
         <div data-u="caption" data-t="0" style="position: absolute; top: 100px; left: 600px; width: 445px; height: 300px;">
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-phone.png" style="position: absolute; top: 0px; left: 0px; width: 445px; height: 300px;" />
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-jssor-slider.png" data-u="caption" data-t="1" style="position: absolute; top: 70px; left: 130px; width: 102px; height: 78px;" />
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-text.png" data-u="caption" data-t="2" style="position: absolute; top: 153px; left: 163px; width: 80px; height: 53px;" />
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-fruit.png" data-u="caption" data-t="3" style="position: absolute; top: 60px; left: 220px; width: 140px; height: 90px;" />
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-navigator.png" data-u="caption" data-t="4" style="position: absolute; top: -123px; left: 121px; width: 200px; height: 155px;" />
         </div>
         <div data-u="caption" data-t="5" style="position: absolute; top: 120px; left: 650px; width: 470px; height: 220px;">
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-phone-horizontal.png" style="position: absolute; top: 0px; left: 0px; width: 470px; height: 220px;" />
             <div style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px; overflow: hidden;">
                 <img src="<?php echo base_url("assets");?>/slider_imgs/c-slide-1.jpg" data-u="caption" data-t="6" style="position: absolute; top: 0px; left: 0px; width: 379px; height: 213px;" />
                 <img src="<?php echo base_url("assets");?>/slider_imgs/c-slide-3.jpg" data-u="caption" data-t="7" style="position: absolute; top: 0px; left: 379px; width: 379px; height: 213px;" />
             </div>
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-navigator-horizontal.png" style="position: absolute; top: 4px; left: 45px; width: 379px; height: 213px;" />
             <img src="<?php echo base_url("assets");?>/slider_imgs/c-finger-pointing.png" data-u="caption" data-t="8" style="position: absolute; top: 740px; left: 1600px; width: 257px; height: 300px;" />
         </div>
     </div>
     <div data-p="225.00" style="display: none;">
         <img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/purple.jpg" />
     </div>
     <div data-p="225.00" style="display: none;">
         <img data-u="image" src="<?php echo base_url("assets");?>/slider_imgs/red.jpg" />
     </div>
     <a data-u="ad" href="http://www.jssor.com" style="display:none">jQuery Slider</a>

 </div>
 <!-- Bullet Navigator -->
 <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
     <!-- bullet navigator item prototype -->
     <div data-u="prototype" style="width:16px;height:16px;"></div>
 </div>
 <!-- Arrow Navigator -->
 <span data-u="arrowleft" class="jssora22l" style="top:0px;left:12px;width:40px;height:58px;" data-autocenter="2"></span>
 <span data-u="arrowright" class="jssora22r" style="top:0px;right:12px;width:40px;height:58px;" data-autocenter="2"></span>

的script.js

jssor_1_slider_init = function() {

     var jssor_1_SlideoTransitions = [
         [{b:5500,d:3000,o:-1,r:240,e:{r:2}}],
         [{b:-1,d:1,o:-1,c:{x:51.0,t:-51.0}},{b:0,d:1000,o:1,c:{x:-51.0,t:51.0},e:{o:7,c:{x:7,t:7}}}],
         [{b:-1,d:1,o:-1,sX:9,sY:9},{b:1000,d:1000,o:1,sX:-9,sY:-9,e:{sX:2,sY:2}}],
         [{b:-1,d:1,o:-1,r:-180,sX:9,sY:9},{b:2000,d:1000,o:1,r:180,sX:-9,sY:-9,e:{r:2,sX:2,sY:2}}],
         [{b:-1,d:1,o:-1},{b:3000,d:2000,y:180,o:1,e:{y:16}}],
         [{b:-1,d:1,o:-1,r:-150},{b:7500,d:1600,o:1,r:150,e:{r:3}}],
         [{b:10000,d:2000,x:-379,e:{x:7}}],
         [{b:10000,d:2000,x:-379,e:{x:7}}],
         [{b:-1,d:1,o:-1,r:288,sX:9,sY:9},{b:9100,d:900,x:-1400,y:-660,o:1,r:-288,sX:-9,sY:-9,e:{r:6}},{b:10000,d:1600,x:-200,o:-1,e:{x:16}}]
     ];

     var jssor_1_options = {
         $AutoPlay: true,
         $SlideDuration: 800,
         $SlideEasing: $Jease$.$OutQuint,
         $CaptionSliderOptions: {
             $Class: $JssorCaptionSlideo$,
             $Transitions: jssor_1_SlideoTransitions
         },
         $ArrowNavigatorOptions: {
             $Class: $JssorArrowNavigator$
         },
         $BulletNavigatorOptions: {
             $Class: $JssorBulletNavigator$,
             $ChanceToShow: 2
         }
     };

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

     //responsive code begin
     //you can remove responsive code if you don't want the slider scales while window resizing
     function ScaleSlider() {
         var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
         if (refSize) {
             refSize = Math.min(refSize, 1920);
             jssor_1_slider.$ScaleWidth(refSize);
         }
         else {
             window.setTimeout(ScaleSlider, 30);
         }
     }
     ScaleSlider();
     $Jssor$.$AddEvent(window, "load", ScaleSlider);
     $Jssor$.$AddEvent(window, "resize", ScaleSlider);
     $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
     //responsive code end
 };

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,在玩完代码之后,这里解决的是我的代码:

enter code here @{
ViewBag.Title = "Revista"; } <div class="row">
<div class="col-xs-2">


</div>


<script type="text/javascript" src="~/App_Start/js/jssor.js"></script>
<script type="text/javascript" src="~/App_Start/js/jssor.slider.js"></script>
<script src="jssor.slider.min.js"></script>


<script>
    jssor_slider1_starter = function (containerId) {
        //Reference http://www.jssor.com/development/slider-with-slideshow-no-jquery.html
        //Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html

        var _SlideshowTransitions = [
        //Fade
        { $Duration: 1200, $Opacity: 2 }
        ];

        var options = {
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0)
            $AutoPlay: 1,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $Idle: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            //$SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
            //    $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
            //    $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
            //    $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
            //    $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            //}
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2,
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 
            }
        };

        var jssor_slider1 = new $JssorSlider$(containerId, options);
    }


</script>

<div class="col-xs-8">
    <div class="jumbotron" style="width: 410px; height: 480px ">

        <div id="slider1_container" style="position: relative; width: 400px; height: 480px; ">

            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 300px; height: 400px;
        overflow: hidden">
                <div>                        
                    <a href="../Images/Revista/1ContactoCeNaCeNov2011.pdf" target="_blank">
                        @*<img u=image src="../Images/Revista/1.png" />*@
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.1
                    </div>                        
                </div>
                <div>
                    <a href="../Images/Revista/2ContactoCeNaCeMar2012.pdf" target="_blank">
                        @*<img u=image src="../Images/Revista/2.png" />*@
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.2
                    </div>
                </div>
                <div>
                    <a href="../Images/Revista/3ContactoCeNaCeOct2012.pdf" target="_blank">
                        @*<img u=image src="../Images/Revista/3.png" />*@
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.3
                    </div>
                </div>
                <div>
                    <a href="../Images/Revista/4Contacto CenaceJun13.pdf" target="_blank">
                        <img u=image src="../Images/Revista/4.png" />
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.4
                    </div>
                </div>
                <div>
                    <a href="../Images/Revista/5ContactoCenaceNov.pdf" target="_blank">
                        <img u=image src="../Images/Revista/5.png" />
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.5
                    </div>
                </div>
                <div>
                    <a href="../Images/Revista/6ContactoCenaceAbr2014.pdf" target="_blank">
                        <img u=image src="../Images/Revista/6.png" />
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.6
                    </div>
                </div>
                <div>
                    <a href="../Images/Revista/7a Edición Contacto Cenace.pdf" target="_blank">
                        <img u=image src="../Images/Revista/7.png" />
                    </a>
                    <div style="position:absolute; background-color:#ffffff ;">
                        Vol.7
                    </div>
                </div> 
                <span data-u="arrowleft" class="jssora11l" style="top: 122.5px; left: 8px; width: 55px; height: 55px" data-autocenter="2"></span>
                <span data-u="arrowright" class="jssora11r" style="top: 122.5px; right: 8px; width: 55px; height: 55px" data-autocenter="2"></span>

            </div>
            <style>
                        /* jssor slider arrow navigator skin 11 css */
                        /*
                .jssora11l                  (normal)
                .jssora11r                  (normal)
                .jssora11l:hover            (normal mouseover)
                .jssora11r:hover            (normal mouseover)
                .jssora11l.jssora11ldn      (mousedown)
                .jssora11r.jssora11rdn      (mousedown)
                */
                .jssora11l, .jssora11r {
                    display: block;
                    position: absolute;
                    /* size of arrow element */
                    width: 37px;
                    height: 37px;
                    cursor: pointer;
                    background: url(../Images/a11.png) no-repeat;
                    overflow: hidden;
                }

                        .jssora11l {
                            background-position: -11px -41px;
                        }

                        .jssora11r {
                            background-position: -71px -41px;
                        }

                        .jssora11l:hover {
                            background-position: -131px -41px;
                        }

                        .jssora11r:hover {
                            background-position: -191px -41px;
                        }

                        .jssora11l.jssora11ldn {
                            background-position: -251px -41px;
                        }

                        .jssora11r.jssora11rdn {
                            background-position: -311px -41px;
                        }
            </style>

            @*<a style="display: none" href="http://www.jssor.com">slider in html</a>*@
            <!-- Trigger -->
            <script>
                jssor_slider1_starter('slider1_container');
            </script>
        </div>

    </div>

</div>

我将箭头代码放在滑块内,更重要的是我必须更改..background:url(../ Images / a11.png)no-repeat; ..,a11.png图像被复制到我的Images文件夹中,此后箭头出现在所需的位置,我认为这个子弹与子弹一起工作,让我知道这是否适合你。