1. ホーム
  2. 質問と答え
  3. jQuery Slider^2

jQuery Slider^2

2011-07-27 16 views
0

私は疲れましたjQuery Slider^2はhttp://wex.im/で利用できます。jQuery Slider^2

私は与えられたすべての（非常に基本的な）説明がなされてきたが、私はこのエラーを得た： 

Uncaught TypeError: Cannot call method 'height' of null

は私が間違って何をしましたか？このjqプラグインの代替手段をご存知ですか？答えをありがとう。

出典

2011-07-27 Anonymous

答えて

0

あなたの書式設定が間違っています。プラグインのサンプルコードを提供しますが、これを変更することはできますが、これに関するドキュメントは見つかりません。

<div id="slider" class="jquery-slider" style="width: 600px; height: 200px; "> 
        <div class="simple jquery-slider-element" style="background-image: url(http://wex.im/img/img1.jpg); display: block; left: -600px; "> 
         <h2>Simple</h2> 
         <q>Tested with humen, no monkeys.</q> 
         <a href="get/stable">Download<br>stable</a> 
         <a href="get/devel">Download<br>devel</a> 
        </div> 
        <div class="light jquery-slider-element" style="background-image: url(http://wex.im/img/img2.jpg); display: block; left: -600px; "> 
         <h2>Light</h2> 
         <q>I think ~5,5k as raw is not too bad.</q> 
         <a href="get/stable">Download<br>stable</a> 
         <a href="get/devel">Download<br>devel</a> 
        </div> 
        <div class="easy jquery-slider-element" style="background-image: url(http://wex.im/img/img3.jpg); left: 0px; display: block; "> 
         <h2>Easy</h2> 
         <q>$('#slider').slider(); Too hard?</q> 
         <a href="get/stable">Download<br>stable</a> 
         <a href="get/devel">Download<br>devel</a> 
        </div> 
       <span class="jquery-slider-pages"><span class="jquery-slider-page jquery-slider-page-current"></span><span class="jquery-slider-page"></span><span class="jquery-slider-page"></span></span><span class="jquery-slider-control jquery-slider-control-prev">«</span><span class="jquery-slider-control jquery-slider-control-next">»</span></div>

EDIT：

は、すべてのコードをコピーだけ "の簡単なjqueryのスライダー要素" スタイル属性と内容（例えばH2、など）を変更

出典

2011-07-27 14:49:21

0 
var slider1Options = { 
           $Idle: 3000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
           $DragOrientation: 0,        //[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 
           $Class: $JssorCaptionSlider$,     //[Required] Class to create instance to animate caption 
           $CaptionTransitions: captionTransitions_childSliders,  //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder 
           $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 
          }, 

          $BulletNavigatorOptions: {        //[Optional] Options to specify and enable navigator or not 
           $Class: $JssorBulletNavigator$,      //[Required] Class to create navigator instance 
           $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
           $SpacingX: 10,         //[Optional] Horizontal space between each item in pixel, default value is 0 
           $SpacingY: 10         //[Optional] Vertical space between each item in pixel, default value is 0 
          }, 

          $ArrowNavigatorOptions: { 
           $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
           $ChanceToShow: 2        //[Required] 0 Never, 1 Mouse Over, 2 Always 
          } 
         }; 

         var jssorSlider1 = new $JssorSlider$("slider1_container", slider1Options); 

         var slider2Options = { 
          $AutoPlayInterval: 3000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
          $DragOrientation: 0,        //[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) 

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

          $CaptionSliderOptions: {       //[Optional] Options which specifies how to animate caption 
           $Class: $JssorCaptionSlider$,     //[Required] Class to create instance to animate caption 
           $CaptionTransitions: captionTransitions_childSliders,  //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder 
           $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 
          }, 

          $BulletNavigatorOptions: {        //[Optional] Options to specify and enable navigator or not 
           $Class: $JssorBulletNavigator$,      //[Required] Class to create navigator instance 
           $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
           $SpacingX: 10,         //[Optional] Horizontal space between each item in pixel, default value is 0 
           $SpacingY: 10         //[Optional] Vertical space between each item in pixel, default value is 0 
          }, 

          $ArrowNavigatorOptions: { 
           $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
           $ChanceToShow: 2        //[Required] 0 Never, 1 Mouse Over, 2 Always 
          } 
         }; 

         var jssorSlider2 = new $JssorSlider$("slider2_container", slider2Options); 

         var bannerSlider_slideshowTransitions = [ 
         //Fade in R 
         {$Duration: 1200, x: -0.3, $During: { $Left: [0.3, 0.7] }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } 
         //Fade out L 
         , { $Duration: 1200, x: 0.3, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 } 
         ]; 

         var slider3Options = { 
          $Idle: 3000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
          $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 $DisplayPieces is greater than 1, or parking position is not 0) 

          $SlideshowOptions: {        //[Optional] Options to specify and enable slideshow or not 
           $Class: $JssorSlideshowRunner$,     //[Required] Class to create instance of slideshow 
           $Transitions: bannerSlider_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 
          }, 

          $BulletNavigatorOptions: {        //[Optional] Options to specify and enable navigator or not 
           $Class: $JssorBulletNavigator$,      //[Required] Class to create navigator instance 
           $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
           $SpacingX: 10,         //[Optional] Horizontal space between each item in pixel, default value is 0 
           $SpacingY: 10         //[Optional] Vertical space between each item in pixel, default value is 0 
          }, 

          $ArrowNavigatorOptions: { 
           $Class: $JssorArrowNavigator$,    //[Requried] Class to create arrow navigator instance 
           $ChanceToShow: 2        //[Required] 0 Never, 1 Mouse Over, 2 Always 
          }, 

          $ThumbnailNavigatorOptions: { 
           $Class: $JssorThumbnailNavigator$,    //[Required] Class to create thumbnail navigator instance 
           $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
           $ActionMode: 0,         //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 
           $NoDrag: true        //[Optional] Disable drag or not, default value is false 
          } 
         }; 

         var jssorSlider3 = new $JssorSlider$("slider3_container", slider3Options); 

         function IsBrowserIe8Earlier() { 
          var isBrowserIe8Earlier; 

          var app = navigator.appName; 
          var ua = navigator.userAgent; 

          if (app == "Microsoft Internet Explorer" && 
          !!window.attachEvent && !!window.ActiveXObject) { 

           var ieOffset = ua.indexOf("MSIE"); 

           browserRuntimeVersion = document.documentMode || parseFloat(ua.substring(ieOffset + 5, ua.indexOf(";", ieOffset))); 

           isBrowserIe8Earlier = browserRuntimeVersion < 8; 
          } 
         } 

         var sliderClusterSlideshowOptions = IsBrowserIe8Earlier() ? null : {        //[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 
         }; 

         var slidercOptions = { 
          $AutoPlay: false,         //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
          $AutoPlayInterval: 3000000,       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
          $PauseOnHover: 1,         //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1 

          $ArrowKeyNavigation: true,       //Allows arrow key to navigate or not 
          $SlideDuration: 800,        //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
          $UISearchMode: 0,         //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc). 
          $DragOrientation: 0,        //[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) 

          $SlideshowOptions: sliderClusterSlideshowOptions, 

          $CaptionSliderOptions: {       //[Optional] Options which specifies how to animate caption 
           $Class: $JssorCaptionSlider$,     //[Required] Class to create instance to animate caption 
           $CaptionTransitions: captionTransitions,  //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder 
           $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 
          }, 

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

          $BulletNavigatorOptions: {        //[Optional] Options to specify and enable navigator or not 
           $Class: $JssorBulletNavigator$,      //[Required] Class to create navigator instance 
           $ChanceToShow: 2,        //[Required] 0 Never, 1 Mouse Over, 2 Always 
           $AutoCenter: 1,         //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 
           $SpacingX: 4,         //[Optional] Horizontal space between each item in pixel, default value is 0 
           $SpacingY: 4         //[Optional] Vertical space between each item in pixel, default value is 0 
          } 
         }; 

         var jssorSliderc = new $JssorSlider$("sliderc_container", slidercOptions); 

         //responsive code begin 
         //you can remove responsive code if you don't want the slider scales while window resizes 
         function ScaleSlider() { 
          var parentWidth = jssorSliderc.$Elmt.parentNode.clientWidth; 
          if (parentWidth) 
           jssorSliderc.$ScaleWidth(Math.max(Math.min(parentWidth, 960), 300)); 
          else 
           window.setTimeout(ScaleSlider, 30); 
         } 
         ScaleSlider(); 

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

         //slider cluster controller code begin 
         function SliderCluster(mainSlider, autoPlayInterval) { 
          var _Self = this; 
          var _NestedSliders = []; 
          var _NestedSliderCurrent; 

          var _CaptionInCounter = 0; 

          function OnChildSliderStateChange(currentIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) { 
           if (progress == idleBegin) { 
            if (!(++_CaptionInCounter % 4)) { 

             // _NestedSliderCurrent && _NestedSliderCurrent.$Pause(); 

             mainSlider.$Play(true); 
            } 
           } 
          } 

          function OnMainSliderStateChange(currentIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) { 

           _NestedSliderCurrent = _NestedSliders[currentIndex]; 

           if (_NestedSliderCurrent) { 
            if (progress == idleBegin) { 

             mainSlider.$Pause(); 
             _NestedSliderCurrent.$Play(true); 
            } 
            else if (progress == progressBegin) { 
             _CaptionInCounter = 0; 
             mainSlider.$Play(true); 
            } 
           } 
          } 

          function OnMainSliderSwipeStart(position, virtualPosition) { 
           _NestedSliderCurrent && _NestedSliderCurrent.$Pause(); 
           mainSlider.$Pause(); 
          } 

          function OnMainSliderPark(slideIndex, fromIndex) { 
           _CaptionInCounter = 0; 
           mainSlider.$Play(); 
          } 

          _Self.$AddChildSlider = function (childSlider, slideIndex) { 
           _NestedSliders[slideIndex] = childSlider; 
           childSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnChildSliderStateChange); 
          }; 

          _Self.$Start = function() { 
           mainSlider.$On($JssorSlider$.$EVT_PARK, OnMainSliderPark); 
           mainSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnMainSliderStateChange); 
           mainSlider.$On($JssorSlider$.$EVT_SWIPE_START, OnMainSliderSwipeStart); 

           mainSlider.$Play(true); 
          } 
         } 

         var sliderCluster = new SliderCluster(jssorSliderc); 
         sliderCluster.$AddChildSlider(jssorSlider1, 0); 
         sliderCluster.$AddChildSlider(jssorSlider2, 1); 
         //sliderCluster.$AddChildSlider(jssorSlider3, 2); 
         sliderCluster.$Start(); 

         //slider cluster controller code end 
        });

出典

2015-08-14 05:17:40 sam

関連する問題

 関連する問題