JQuery를 사용하여 원활한 스크롤 뉴스를 만드는 단계에 대한 자세한 설명

이 글에서는 주로 JQuery를 기반으로 끊김없는 스크롤 뉴스를 만드는 방법을 소개합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

우선 여기에는 아래와 같이 매우 간결한 HTML 코드 조각이 있습니다.

<ul>
<li>你说我是好人吗，我是好人啊</li>
<li>哈哈，我真的不知道说什么了</li>
<li>生活就是应该平淡的</li>
<li>像上学一样的工作</li>
</ul>
</div>

그럼 우리가 해야 할 일은 그냥 원활하게 스크롤되도록 만드는 것입니다.

아이디어:

먼저 JQuery를 소개하고 li 요소 목록의 첫 번째 요소 콘텐츠를 가져옵니다.

그런 다음 모든 li 요소 목록 콘텐츠를 표시합니다. 모든 li 요소의 목록 콘텐츠를 가져오는 parent() 메서드

다음으로 해야 할 일은 가져온 첫 번째 li 요소의 콘텐츠를 뒤에 있는 모든 li 요소의 목록 콘텐츠에 추가하는 것입니다.

은 위와 연결되어 있고, 다음으로 할 일은 첫 번째 li 요소를 숨기는 것입니다.

마지막으로 setInterval('scroll_news()',1000);을 사용하여 반복적으로 호출할 수 있습니다.

최종 완성 코드는 다음과 같습니다.

<script type="text/javascript">
function scrollNews(){
$(document).ready(function(){
  $(&#39;#tag li&#39;).eq(0).fadeOut("slow",function(){
   $(this).clone().appendTo($(this).parent()).fadeIn("slow");
   $(this).remove();
  });
});
}
setInterval(&#39;scrollNews()&#39;,1000);
</script>

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

jQueryt 비디오 튜토리얼을 방문하세요. !