사용자 정의 이미지 슬라이더

그래서 자바 스크립트를 사용하여 내 기본 이미지 슬라이더를 만들려고하는데 그냥 작동하지 않습니다. 내 3 개의 이미지 사이를 회전시키고 싶습니다. 여기사용자 정의 이미지 슬라이더

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>

내가하고 싶은 모든 170px에 현재 표시 슬라이드 높이를 0 픽셀하기 위해 다른 사람을 변화입니다 : 여기 YM의 자바 스크립트입니다. 그러나 그것은 무엇이든 첫 번째 슬라이드에 머물러 있습니다. 당신은 slides[i-1].style.width = "0px"를 사용해야합니다

출처

2013-07-20 Duncan Palmer

하지 slides[i-1].width = "0px"
jsfiddle : DEMO

출처

2013-07-20 04:57:01

이 예는 조금 과도하게 단순화처럼 당신이 그것에서 이미지 요소를 가지고 있지 않기 때문에 그것은, 보인다.

<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의 크기가 그 아이의 크기에 영향을 미치지 것입니다, 그들은 단지 DIV 외부에 유출 할 것이다 : 당신의 HTML은 다음과 같습니다 가정 할 것입니다. 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

좋은 생각이지만이 질문과 관련되지 않을 수 있습니다. –

-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

사용자 정의 이미지 슬라이더

답변

관련 문제