jQuery로 구현된 한 줄 공지 활동 캐러셀 효과 공유 예

이 글에서는 jQuery를 기반으로 한 한 줄짜리 공지 활동 캐러셀 효과를 예제 코드를 통해 소개하고 있습니다. 코드가 간단하고 이해하기 쉬우며, 필요한 친구들이 참고할 수 있으면 좋겠습니다. 그것은 모두에게 도움이 될 수 있습니다.

더 이상 헛소리하지 마세요. 구체적인 코드는 다음과 같습니다.

<p class="lunbo123" style="position:relative;height: 45px;overflow: hidden;background-color:white" ;>
<ul id="myul" style="margin:6px;padding:0px;position:absolute;width: 700px; height: auto;">
<li>
<a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; ">
<span style="height:36px ; line-height: 36px;">公告test1 
</span>
</a>
</br>
</li>
<li>
<a href="" style=" rel="external nofollow" rel="external nofollow" text-decoration: none;color: #000000; ">
<span style="height:36px ; line-height: 36px;">活动test2 
</span>
</a>
</br>
</li>
</ul>
</p>
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
function lunbo123(id, height) {
var ul = $(id);
var liFirst = ul.find(&#39;li:first&#39;);
$(id).animate({
top: height
}).animate({
"top": 0
}, 0, function() {
var clone = liFirst.clone();
$(id).append(clone);
liFirst.remove();
})
}
setInterval("lunbo123(&#39;#myul&#39;,&#39;-45px&#39;)", 2500)
</script>
<style>
#myul {
list-style-type: none;
width: 300px;
height: 45px;
font-size: 20px;
}
</style>

관련 권장 사항:

공지사항을 위아래로 스크롤하는 효과를 얻기 위한 10줄의 js 코드

jQuery를 사용하여 일정한 간격으로 페이지에 팝업 광고 효과를 구현하는 방법

자바스크립트를 사용하여 광고 배너 반복 효과를 구현하는 방법 튜토리얼

위 내용은 jQuery로 구현된 한 줄 공지 활동 캐러셀 효과 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!