Question

Jssor导致JavaScript错误。 IE 8和IE 11也是同样的问题。

我尝试了什么：

选中https://stackoverflow.com/questions/26465515/script5007-error-in-jssor-slider-in-ie8

选中https://stackoverflow.com/questions/26632335/jssor-slider-js-error-on-testing-server

选中JSSOR - Cannot read type property 'currentStyle' of undefined

在github上更新到最新版本的jssor。

检查代码中的错误代码。

在其他浏览器上查看，效果很好。

结果

无法获得任何有效的解决方案。

错误消息

 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)

代码;

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();

Answer 1

以下几行无需删除。

  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
  },

Answer 2

This Worked for me. Flicker in the chart was issue.

Check this for information:

function fixFlicker（docid，tname）{

var eDoc = document.getElementById(docid);
var cNode = eDoc.getElementsByTagName(tname);

//Copy All the Tag Name
 var arr = [];
 for (var i = 0; i < cNode.length; i++) {
   arr.push(cNode[i].id);
 } //End for loop

 //Delete the Container Elements
 eDoc.innerHTML = "";

//Add back each element
 for (var j = 0; j < arr.length; j++) {
     var newElement = {};
     var newElement = document.createElement(tname);
     newElement.setAttribute("id", arr[j]);
     eDoc.appendChild(newElement)
     console.log(newElement);   
   }
}//End of Flicker Clean Up

fixFlicker("div", "canvas");

Jssor - Uncaught TypeError：无法读取属性＆＃39; currentStyle＆＃39;未定义的

2 个答案: