2017-02-13 4 views
0

내가 여기에서 찾은 몇 가지 스크립트 아이디어를 수정하여 여러 텍스트 블록을 회전하거나 뒤집어서 (방문자가 스크롤하지 않아도 됨) 사용자가 움직일 때 일시 중지하도록했습니다. 그러나 동일한보기에서 회전 텍스트의 세 가지 다른 그룹 (블록 또는 div)이 있도록 설정하려고합니다. 각 그룹에 다른 ID를 부여했지만 스크립트에 해당 수준의 동작을 추가하여 모두 동시에 진행하는 방법에 대해서는 확신 할 수 없습니다. 코드의 기본을 보여주기 위해 jsfiddle을 만들었습니다. 첫 번째 세트 (Joan) 만 실제로 텍스트가 뒤집어지는 것을 볼 수 있기 때문에 다른 두 개 (Shelly, Valerie)는 그냥 비어있게됩니다. 세 가지 모두 동시에 작동하게하는 자바 스크립트의 간단한 수정이 있습니까? 이를 위해 multi-group text rotation jsfiddle 다중 그룹 jQuery 텍스트 회전 장치가 작동하지 않습니다.

function slideSwitch() { 
var $active = $('.fadein quote.active'); 
if ($active.length == 0) $active = $('.fadein quote:last'); 
var $next = $active.next().length ? $active.next() : $('.fadein quote:first'); 

$active.addClass('last-active'); 

$next.css({ 
    opacity: 0.0 
}) 
    .addClass('active') 
    .animate({ 
    opacity: 1.0 
}, 1000, function() { 
    $active.removeClass('active last-active'); 
}); 
} 

$(function() { 
    var interval = setInterval(slideSwitch, 4000); 

    $('.fadein').hover(function() { 
     clearInterval(interval); 
    }, function() { 
     interval = setInterval(slideSwitch, 4000); 
    }); 

}); 

답변

1

당신은 객체 지향 프로그래밍의 관점에서 생각해야 작동합니다. 자세한 내용은 some documentation을 참조하십시오.

이 코드를 살펴보십시오. 그것은 각 사람을 위해 일할 두루마리를 얻습니다.

var Person = function(id) { 
 
\t this.id = id; 
 
}; 
 

 
Person.prototype.slideSwitch = function(id) { 
 

 
\t let counter = 1; 
 

 
\t function getNext(){ 
 

 
\t \t //identify last active 
 
\t \t var lastActiveCounter = counter; 
 
\t \t $(id+ " quote:nth-child("+lastActiveCounter+")").addClass('last-active'); 
 

 
\t \t //increase counter or reset it to 1 
 
\t \t counter++; 
 
\t \t if (counter > $(id).children('quote').length) { 
 
\t \t \t counter=1; 
 
\t \t } 
 
\t \t //make changes to next active (since counter has changed) 
 
\t \t $(id+" quote:nth-child("+counter+")").css({ 
 
\t \t   opacity: 0.0 
 
\t \t  }) 
 
\t \t   .addClass('active') 
 
\t \t   .animate({ 
 
\t \t   opacity: 1.0 
 
\t \t  }, 1000, function() { 
 
\t \t   $(id+ " quote:nth-child("+lastActiveCounter+")").removeClass('active last-active'); 
 
\t \t  }); 
 
\t \t } 
 

 
\t return getNext; 
 
}; 
 

 
Person.prototype.start = function() { 
 
    this.interval = setInterval(this.slideSwitch(this.id), 4000); 
 
}; 
 

 
Person.prototype.clear = function(id) { 
 
\t clearInterval(this.interval); 
 
} 
 

 
$('.fadein').hover(function(){ 
 

 
\t let id=$(this).attr("id"); 
 
\t switch (id) { 
 
\t \t case "Valerie" : 
 
\t \t \t Valerie.clear(); 
 
\t \t \t break; 
 
\t \t case "Joan" : 
 
\t \t \t Joan.clear(); 
 
\t \t \t break; 
 
\t \t case "Shelly": 
 
\t \t \t Shelly.clear(); 
 
\t \t \t break; 
 
\t } 
 
}, function(){ 
 
\t let id=$(this).attr("id"); 
 
\t switch (id) { 
 
\t \t case "Valerie" : 
 
\t \t \t Valerie.start(); 
 
\t \t \t break; 
 
\t \t case "Joan" : 
 
\t \t \t Joan.start(); 
 
\t \t \t break; 
 
\t \t case "Shelly": 
 
\t \t \t Shelly.start(); 
 
\t \t \t break; 
 
\t } 
 
}); 
 

 

 
var Valerie = new Person("#Valerie"); 
 
var Joan = new Person("#Joan"); 
 
var Shelly = new Person("#Shelly"); 
 

 
Valerie.start(); 
 
Joan.start(); 
 
Shelly.start();
.fadein { 
 
    height: 150px; 
 
    position: relative; 
 
    width: 100%; /*temp*/ 
 
    float:left; 
 
} 
 

 
div quote { 
 
    text-align: left; 
 
    background-color: white; 
 
    left: 0; 
 
    opacity: 0.0; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: 100%; 
 
    top: 0; 
 
    z-index: 8; 
 
    overflow: hidden; 
 
} 
 

 
caption { 
 
    text-align: left; 
 
    background-color: white; 
 
    left: 0; 
 
    opacity: 0.0; 
 
    position: absolute; 
 
    height: inherit; 
 
    width: 100%; 
 
    top: 0; 
 
    z-index: 8; 
 
    overflow: hidden; 
 
} 
 

 
div quote.active { 
 
    opacity: 1.0; 
 
    z-index:10; 
 
} 
 
div quote.last-active { 
 
    z-index: 9; 
 
}
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 
 

 
<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Joan!</i></h3> 
 
<div class="fadein" id="Joan"> 
 
    <quote style="font-size:16pt;">&quot;Because Joan is nice!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Joan is smart!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Joan attends to the details!&quot;</quote> 
 
</div> 
 

 
<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Shelly!</i></h3> 
 
<div class="fadein" id="Shelly"> 
 
    <quote style="font-size:16pt;">&quot;Because Shelly is no-nonsense!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Shelly is does quit!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Shelly is on their side!&quot;</quote> 
 
</div> 
 

 
<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Valerie!</i></h3> 
 
<div class="fadein" id="Valerie"> 
 
    <quote style="font-size:16pt;">&quot;Because Valerie listens!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Valerie is tireless!&quot;</quote> 
 
    <quote style="font-size:16pt;">&quot;Because Valerie gets it done!&quot;</quote> 
 
</div>

+0

와우! 고마워요! 나는 OOP에 대해 들어 왔지만 아직 javascript 나 jquery에 대해서는 거의 이해하지 못했다. 나는 여기 많은 사람들이 나를 멍청하다고 생각할 것이라고 생각하지만, 할 일이 많고, 자신과 같은 누군가가 시간을내어 그들의 지식을 나에게 알려줌으로써 올바른 방향으로 나를 가리켜 주실 것을 진심으로 감사드립니다. . –

+0

이 프로젝트에서 수행 할 다음 작업은 ios (호버 비트가 문제가되는 것)에서 작동하도록하는 것입니다. 또한 데이터베이스에 새 직원을 추가 할 때 javascript에서 새 ID를 자동 생성하는 방법을 파악할 수 있습니다 (텍스트 블록은 고객이 남긴 피드백 의견에서 나옵니다.) –

+0

@phc_joe 도와 드리겠습니다. 자바 스크립트에서 배울 점이 많습니다. 나는 아직도 배우고있어! jQuery를 사용하여 동적으로 DOM을 빌드하려는 경우 배열의 요소 (또는 JSON 객체)에 '새 사람'을 저장하여 직원 수나 주석의 수에 관계없이 작업하는 것이 더 쉽습니다. – wlh