1. 首頁
  2. 問答
  3. 自定義圖像滑塊

自定義圖像滑塊

2013-07-20 67 views
0

所以我想創建我自己的基本圖像滑塊使用JavaScript，但它不會工作。我想讓它在我的3張圖片之間旋轉。這裏是YM的javascript：自定義圖像滑塊

var count = 1; 

setInterval(function animate() { 

var slides = document.getElementsByClassName("slide"); 

for(var i=1; i <slides.length+1; i++) { 
    if(i == count) { 
     slides[i-1].width = "170px"; 
    } else { 
     slides[i-1].width = "0px" 
    } 
} 

if(count == 3) { 
    count = 1; 
} else { 
    count++;  
} 

}, 1000);

這裏是我的html

<div id="s1" class="slide"></div> 
<div id="s2" class="slide"></div> 
<div id="s3" class="slide"></div>

所有我想要做的是改變當前顯示的幻燈片高度170像素，其餘爲0px。但無論如何，它都會保持在第一張幻燈片上。

來源

2013-07-20 Duncan Palmer

回答

2

您應該使用slides[i-1].style.width = "0px"不slides[i-1].width = "0px"
的jsfiddle：DEMO

來源

2013-07-20 04:57:01

0

它看起來像這樣的例子是有點過於簡單，因爲你沒有在它的圖像元素。我會假設你的HTML看起來像這樣：然後

<div id="s1" class="slide"><img src="s1.jpg"/></div> 
<div id="s2" class="slide"><img src="s2.jpg"/></div> 
<div id="s3" class="slide"><img src="s2.jpg"/></div>

的問題是，容器div的大小不會影響其子女的大小，他們只會灑股利之外。 Here's a good blog post on how this works.如果你看一下像Firebug這樣的工具中的DOM，你可以很容易地看到這一點。

解決此問題的一個簡單方法是將CSS屬性「overflow：hidden」添加到.slide類。

.slide { 
    overflow: hidden; 
}

這應該會導致div以外的任何內容消失！

來源

2013-07-20 05:00:06 seanmk

+0

好主意，但可能與此問題無關 –

-1 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Banner Rotator Demo - Jssor Slider, Slideshow with Javascript Source Code</title> 
</head> 
<body style="background:#fff;"> 
    <script> 
    </script> 
    <script type="text/javascript" src="../js/Jssor.Slider.Min.js"></script> 
    <script> 
     var _SlideshowTransitions = [ 
     //Swing Outside in Stairs 
     {$Duration: 1200, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.2, $ScaleVertical: 0.1, $Round: { $Left: 1.3, $Top: 2.5} } 

     //Dodge Dance Outside out Stairs 
     , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.1, 0.9], $Top: [0.1, 0.9] }, $SlideOut: true, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Round: { $Left: 0.8, $Top: 2.5} } 

     //Dodge Pet Outside in Stairs 
     , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInWave, $Top: $JssorEasing$.$EaseInWave, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.2, $ScaleVertical: 0.1, $Round: { $Left: 0.8, $Top: 2.5} } 

     //Dodge Dance Outside in Random 
     , { $Duration: 1500, $Delay: 20, $Cols: 8, $Rows: 4, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $FlyDirection: 9, $Easing: { $Left: $JssorEasing$.$EaseInJump, $Top: $JssorEasing$.$EaseInJump, $Clip: $JssorEasing$.$EaseOutQuad }, $ScaleHorizontal: 0.3, $ScaleVertical: 0.3, $Round: { $Left: 0.8, $Top: 2.5} } 

     //Flutter out Wind 
     , { $Duration: 1800, $Delay: 30, $Cols: 10, $Rows: 5, $Clip: 15, $During: { $Left: [0.3, 0.7], $Top: [0.3, 0.7] }, $SlideOut: true, $FlyDirection: 5, $Reverse: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2050, $Easing: { $Left: $JssorEasing$.$EaseInOutSine, $Top: $JssorEasing$.$EaseOutWave, $Clip: $JssorEasing$.$EaseInOutQuad }, $ScaleHorizontal: 1, $ScaleVertical: 0.2, $Round: { $Top: 1.3} } 

     //Collapse Stairs 
     , { $Duration: 1200, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Formation: $JssorSlideshowFormations$.$FormationStraightStairs, $Assembly: 2049, $Easing: $JssorEasing$.$EaseOutQuad } 

     //Collapse Random 
     , { $Duration: 1000, $Delay: 30, $Cols: 8, $Rows: 4, $Clip: 15, $SlideOut: true, $Easing: $JssorEasing$.$EaseOutQuad } 

     //Vertical Chess Stripe 
     , { $Duration: 1000, $Cols: 12, $FlyDirection: 8, $Formation: $JssorSlideshowFormations$.$FormationStraight, $ChessMode: { $Column: 12} } 

     //Extrude out Stripe 
     , { $Duration: 1000, $Delay: 40, $Cols: 12, $SlideOut: true, $FlyDirection: 2, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Assembly: 260, $Easing: { $Left: $JssorEasing$.$EaseInOutExpo, $Opacity: $JssorEasing$.$EaseInOutQuad }, $ScaleHorizontal: 0.2, $Opacity: 2, $Round: { $Top: 0.5} } 

     //Dominoes Stripe 
     , { $Duration: 2000, $Delay: 60, $Cols: 15, $SlideOut: true, $FlyDirection: 8, $Formation: $JssorSlideshowFormations$.$FormationStraight, $Easing: $JssorEasing$.$EaseOutJump, $Round: { $Top: 1.5} } 
     ]; 
    </script> 
    <script> 
     jssor_slider1_starter = function (containerId) { 
      var jssor_slider1 = new $JssorSlider$(containerId, { 
       $AutoPlay: true,//[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false 
       $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,//[Required] The way to choose transition to play slide, 1 Sequence, 0 Random 
        $ShowLink: 2,//[Required] 0 After Slideshow, 2 Always 
        $ContentMode: false //[Optional] Whether to involve whole html content of each slide to play slideshow, otherwise otherwise use the main image to play slideshow, default value is false 
       } 
      }); 
     } 
    </script> 
    <!-- Jssor Slider Begin --> 
    <div id="slider1_container" class="slider1" style="position: relative; width: 600px; 
     height: 300px;"> 
     <!-- Loading Screen --> 
     <div u="loading" style="position: absolute; top: 0px; left: 0px;"> 
      <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; 
       background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;"> 
      </div> 
      <div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; 
       top: 0px; left: 0px;width: 100%;height:100%;"> 
      </div> 
     </div> 
     <!-- Slides Container --> 
     <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; 
      overflow: hidden;"> 
      <div> 
       <a u=image href="#"><img src="../img/landscape/01.jpg" /></a> 
      </div> 
      <div> 
       <a u=image href="#"><img src="../img/landscape/02.jpg" /></a> 
      </div> 
      <div> 
       <a u=image href="#"><img src="../img/landscape/03.jpg" /></a> 
      </div> 
      <div> 
       <a u=image href="#"><img src="../img/landscape/04.jpg" /></a> 
      </div> 
     </div> 
     <a style="display: none" href="http://slideshow.jssor.com">Image Slider</a> 
     <!-- Trigger --> 
     <script> 
      jssor_slider1_starter('slider1_container'); 
     </script> 
</body> 
</html>

來源

2013-07-20 08:24:48

相關問題

 相關問題