jQuery Content Slider 스크립트 도움말

Question

내 사이트에 <div>에 자식 <div>이 포함되어 있습니다. 나는 그 어린이들이 콘텐츠 슬라이더처럼 움직 이도록하고 싶습니다. 몇 가지 다른 플러그인을 시도했지만, DOM 조작으로 DOM 조작을 시도했기 때문에 모두 실패했습니다 ...

내 구현이 좋지 않고 성능에 큰 문제가있는 것으로 보입니다.

누군가가 좋은 콘텐츠 슬라이더를 알고 있는지, 좋은 문서를 가지고 있는지 잘 알고 싶습니다. bxSlider 또는 easySlider를 권장하지 말고 시도해보십시오. 특히 bxSlider가 실패했습니다.

여기 요소가 구성되어 방법은 다음과 같습니다

<div class="Parent"> 
    <div> 
     <h2>...</h2> 
     <ul> 
      <li>...</li> 
     </ul> 
     <p>...</p> 
    </div> 
    (Repeat) 
</div> 

사전에 감사!

편집

내 구현을 재건했고 그것이 내가가 원하는 거의 방식으로 일하고있어. 문제는 목록의 끝에 도달하면 모든 항목을 거쳐 뒤로 빠르게 이동 한 다음 다시 시작한다는 것입니다. 정확하게 수정하는 방법을 모릅니다. 어떤 제안이라도 고맙겠습니다!

var interval; 

var Slider = function() { 
    var width = $(".Parent").width(); 
    var count = $(".Children").size(); 
    var margin = width; 
    var wrapper = $(".Wrapper"); 
    var a = 0; 

    wrapper.css({ 
     width: (width * count) 
    }); 

    var interval = window.setInterval(function() { 
     if (margin == (width * count)) { 
      margin = 0; 
      a = 0; 
     } else { 
      margin = (width * a); 
     }; 

     wrapper.animate({ 
      marginLeft: ("-" + margin + "px") 
     }, 1000); 

     a++; 
    }, 6000); 
}; 

Answer 1

이 작품은 저에게 적합합니다. 아마 당신을 도울 것입니다 :

<script type="text/javascript"> 
var headline_count; 
var headline_interval; 
var old_headline = 0; 
var current_headline = 0; 

headline_count = $("div.headline").size(); 

$("div.headline:eq("+current_headline+")").css('top','5px'); 

headline_interval = setInterval(headline_rotate,7000); //time in milliseconds 
$('#scrollup').hover(function() { 
     clearInterval(headline_interval); 
    }, function() { 
     headline_interval = setInterval(headline_rotate,7000); //time in milliseconds 
     headline_rotate(); 
    }); 

function headline_rotate() { 
    current_headline = (old_headline + 1) % headline_count; 
    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() { 
     $(this).css('top','210px'); 
    }); 
    $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow"); 
    old_headline = current_headline; 
} 
</script> 

// HTML

<div id='scrollBox'> 
<div id='scrollup'> 
    <div class="headline">...</div> 
    <div class="headline">...</div> 
    <div class="headline">...</div> 
</div> 
</div> 

Answer 2

저도 같은 문제를 겪고했습니다. 나는 이것을 사용하여 해결했습니다 (이 내 슬라이드 플러그인의 작품이다) 내부에 적용 jquery(select_expression).each()

function start() 
{ 

var a=$('div:first',$this); 

a.clone().appendTo($this); 

$(a).animate({'marginLeft':options.width*-1},options.speed,function(){$(a).remove();}); 

setTimeout(function() {start();}, delay); 

}