Jssor ​​ - 未捕获的类型错误:无法读取的未定义的属性'currentStyle“属性、错误、类型、未定义

由网友(不如看淡别离)分享简介:Jssor上引起JavaScript错误。这是IE 8的相同的问题,而IE 11。我曾尝试: 选中SCRIPT5007在JSSOR滑块IE8 误差经过 jssor滑块 - 在测试服务器 选中JSSOR - 无法读取未定义的type属性currentStyle更新到GitHub上的最新版本jssor。 经过了code错...

Jssor上引起JavaScript错误。这是IE 8的相同的问题,而IE 11。

我曾尝试:

选中SCRIPT5007在JSSOR滑块IE8 误差

经过 jssor滑块 - 在测试服务器

选中JSSOR - 无法读取未定义的type属性currentStyle

更新到GitHub上的最新版本jssor。

经过了code错误在code。

经过对其他浏览器和它工作得很好。

结果

不能得到任何有效的解决方案。

错误信息

 错误行`VAR jssor_slider1 =新的$ JssorSlider $(slider1_containerc选项);`

 未捕获的类型错误:无法读取未定义jssor.slider.min.js的财产currentStyle':2

Ëjssor.slider.min.js:2
V jssor.slider.min.js:2(匿名函数)jssor.slider.min.js:2
。F $ JssorSlider $ jssor.slider.min.js:2
$ .ajax.success map.js:584
ĴjQuery的-2.1.1.min.js:2
k.fireWith jQuery的-2.1.1.min.js:2
x jQuery的-2.1.1.min.js:4(匿名函数)
 

的code;

HTML

 < D​​IV CLASS =sideshowcontc>< D​​IV CLASS =slideshowcID =slidemapc>< IMG类=slidelegendcSRC =图像/ chlor_a-legend.png>< D​​IV ID =slider1_containerc的风格=的位置是:相对;顶端:0px;左:0px;宽度:640px;高度:612px;显示:inline-block的;>
        <! - 幻灯片集装箱 - >
        < D​​IV U =幻灯片的风格=光标:移动;位置:绝对;溢出:隐藏;左:0px;顶端:0px;宽度:640px;高度:612px;> < D​​IV>< IMG U =CHLOR_A-2003-APR-MAY-JUNSRC =数据/ chlor_a /季节/ chlor_a-2003的四月至五月,Jun.png>
            < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
            背景颜色:#4f91da;不透明度:0.9;过滤器:α(不透明= 90);>
          < / DIV>
          < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
          颜色:白色;字体大小:16像素;字体重量:大胆的;的line-height:50px​​的;文本对齐:中心;> CHLOR_A-2003-APR-MAY-JUN< / DIV>< / DIV>
           < D​​IV>< IMG U =CHLOR_A-2004-APR-MAY-JUNSRC =数据/ chlor_a /季节/ chlor_a-2004-四月至五月,Jun.png>
            < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
            背景颜色:#4f91da;不透明度:0.9;过滤器:α(不透明= 90);>
          < / DIV>
          < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
          颜色:白色;字体大小:16像素;字体重量:大胆的;的line-height:50px​​的;文本对齐:中心;> CHLOR_A-2004-APR-MAY-JUN< / DIV>< / DIV>
           < D​​IV>< IMG U =CHLOR_A-2005-APR-MAY-JUNSRC =数据/ chlor_a /季节/ chlor_a-2005-四月至五月,Jun.png>
            < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
            背景颜色:#4f91da;不透明度:0.9;过滤器:α(不透明= 90);>
          < / DIV>

          < D​​IV的风格=的位置是:绝对的;底部:0px;左:0px;宽度:640px;高度:50px​​的;
          颜色:白色;字体大小:16像素;字体重量:大胆的;的line-height:50px​​的;文本对齐:中心;> CHLOR_A-2013-APR-MAY-JUN< / DIV>< / DIV>
          < / DIV>
        <跨度U =arrowleft级=jssora03l的风格=宽度:55像素,高度:55像素;顶:为200px;左:8像素;>
        < / SPAN>
        <跨度U =arrowright级=jssora03r的风格=宽度:55像素,高度:55像素;顶:200像素;右:8像素>
        < / SPAN>

      < / DIV>< / DIV>< / DIV>
 

jssor ​​JS jQuery中的ajax功能:

  VAR _CaptionTransitions = [];
                            VAR _SlideshowTransitions = [
                                       //{$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}
                                      {$时间:3000,$不透明度:4,$哥:{$时间:3000,$不透明度:1}} //淡出
                                ]。
                              VAR的选择= {
                                   $自动播放:真正的,// [可选]是否自动播放,使幻灯片,此选项必须设置为true,默认值为false
                                  $ DragOrientation:1,// [可选]取向拖动滑动,0无阻力,1 horizental,2垂直,3任一,默认值是1(注意$ DragOrientation应该是相同的$ PlayOrientation当$ DisplayPieces是更大大于1,或停车位置不为0)
                                 $ CaptionSliderOptions:{// [可选]选项,指定如何动画字幕
                                      $ PlayInMode:1,// [可选] 0无(无播放),1链(进入主滑后),3链展平(去主滑后拼合所有字幕动画),默认值是1
                                      $ PlayOutMode:3 // [可选] 0无(无播放),1链(进入主滑前),3链展平(去主幻灯片之前和扁平所有字幕动画),默认值是1
                                  },
                                  $ AutoPlayInterval:1500,// [可选]间隔(毫秒)去下一张幻灯片,因为previous停止,如果滑块自动播放,默认值是3000
                                  $ SlideshowOptions:{// [可选]选项来指定并启用幻灯片或不
                                      $类:$ JssorSlideshowRunner $,// [必填]类创建幻灯片实例
                                      $过渡:_SlideshowTransitions,// [必填]幻灯片过渡的数组播放幻灯片
                                      $ TransitionsOrder:1,// [可选]选择转换到播放幻灯片的方式,1序列,0随机
                                      $ ShowLink:真
                                  },
                                  $ HWA:假的,
                                  $ ArrowNavigatorOptions:{// [可选]选项来指定,使箭头导航或不
                                      $类:$ JssorArrowNavigator $,// [Requried]类来创建箭头导航实例
                                      $ ChanceToShow:2,// [必填] 0从来没有,1鼠标移过,2始终
                                      $自动居中:0,// [可选]自动中心箭父容器,0号,1水平,垂直2,3两种,默认值为0。
                                      $步骤:1 // [可选]步骤去为每一个导航请求,默认值为1
                                  }
                                };

                            VAR jssor_slider1 =新的$ JssorSlider $(slider1_containerc选项); //错误行就在这里。
                            功能ScaleSlider(){
                            。VAR上级宽度= $(。resulttab2)宽() -  90;
                                   如果(上级宽度){
                                      。jssor_slider1 $ ScaleWidth(Math.min(上级宽度,640));
                                   }
                            }
                            ScaleSlider();
 

解决方案

以下行是没有必要的,请删除它。

  VAR _CaptionTransitions = [];

  $ CaptionSliderOptions:{// [可选]选项,指定如何动画字幕
      $ PlayInMode:1,// [可选] 0无(无播放),1链(进入主滑后),3链展平(去主滑后拼合所有字幕动画),默认值是1
      $ PlayOutMode:3 // [可选] 0无(无播放),1链(进入主滑前),3链展平(去主幻灯片之前和扁平所有字幕动画),默认值是1
  },
 

Jssor is causing a JavaScript error on . It is the same problem for IE 8, and IE 11.

What I have tried:

Checked SCRIPT5007 error in JSSOR slider in IE8

Checked jssor slider - js error on testing server

Checked JSSOR - Cannot read type property 'currentStyle' of undefined

Updated to latest version jssor on github.

Checked the code for error in the code.

Checked on other browsers and it works well.

Outcome

Couldn't get any working solution.

The error message

 Error line  `var jssor_slider1 = new $JssorSlider$("slider1_containerc", options);`

 Uncaught TypeError: Cannot read property 'currentStyle' of undefined     jssor.slider.min.js:2

E jssor.slider.min.js:2
V jssor.slider.min.js:2(anonymous function) jssor.slider.min.js:2
f.$JssorSlider$ jssor.slider.min.js:2
$.ajax.success map.js:584
j jquery-2.1.1.min.js:2
k.fireWith jquery-2.1.1.min.js:2
x jquery-2.1.1.min.js:4(anonymous function)

The code;

HTML

      <div class="sideshowcontc"><div class="slideshowc" id="slidemapc"><img class="slidelegendc" src="images/chlor_a-legend.png"><div id="slider1_containerc" style="position: relative; top: 0px; left: 0px; width: 640px; height: 612px; display: inline-block;">
        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 640px; height: 612px;"> <div><img u="CHLOR_A-2003-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2003-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>
          <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
          color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">CHLOR_A-2003-APR-MAY-JUN</div></div>
           <div><img u="CHLOR_A-2004-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2004-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>
          <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
          color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">CHLOR_A-2004-APR-MAY-JUN</div></div>
           <div><img u="CHLOR_A-2005-APR-MAY-JUN" src="data/chlor_a/seasonal/chlor_a-2005-Apr-May-Jun.png">
            <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
            background-color: #4f91da; opacity: 0.9; filter: alpha(opacity=90);">
          </div>

          <div style="position: absolute; bottom: 0px; left: 0px; width: 640px; height: 50px;
          color: White; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center;">CHLOR_A-2013-APR-MAY-JUN</div></div>
          </div>
        <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 200px; left: 8px;">
        </span>
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 200px; right: 8px">
        </span>

      </div></div></div>

jssor js in jquery ajax function:

                            var _CaptionTransitions = [];
                            var _SlideshowTransitions = [
                                       //{$Duration:1200,x:0.3,$SlideOut:true,$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}
                                      {$Duration:3000,$Opacity:4,$Brother:{$Duration:3000,$Opacity:1}}//Fade
                                ];
                              var options = {
                                   $AutoPlay: true,                                      //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                                  $DragOrientation: 1,                                //[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 $DisplayPieces is greater than 1, or parking position is not 0)
                                 $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
                                      $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
                                      $PlayOutMode: 3                                //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
                                  },
                                  $AutoPlayInterval: 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 
                                  },
                                  $HWA:false,
                                  $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                                      $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                                      $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                                      $AutoCenter: 0,                                 //[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
                                  }
                                };

                            var jssor_slider1 = new $JssorSlider$("slider1_containerc", options);   // The error line is here. 
                            function ScaleSlider() {
                            var parentWidth = $(".resulttab2").width() - 90;
                                   if (parentWidth) {
                                      jssor_slider1.$ScaleWidth(Math.min(parentWidth, 640));
                                   }
                            }
                            ScaleSlider();

解决方案

The following lines are not necessary, please remove it.

  var _CaptionTransitions = [];

  $CaptionSliderOptions: {                            //[Optional] Options which specifies how to animate caption
      $PlayInMode: 1,                                 //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
      $PlayOutMode: 3                                //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
  },

阅读全文

相关推荐

最新文章