Beispiel für die gemeinsame Nutzung eines von jQuery implementierten Karusselleffekts für einzeilige Ankündigungsaktivitäten

Dieser Artikel führt Sie anhand eines Beispielcodes in den einzeiligen Ankündigungsaktivitäts-Karusselleffekt ein. Der Code ist einfach und leicht zu verstehen und hat Referenzwert. Ich hoffe, es kann allen helfen.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<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>

Verwandte Empfehlungen:

10 Zeilen JS-Code, um den Effekt zu erzielen, Ankündigungen nach oben und unten zu scrollen

Verwenden Sie jQuery, um die Funktion zum Timing von Popup-Werbung auf der Seite zu implementieren

Tutorial zur Implementierung des kreisförmigen Werbebannereffekts mit Javascript

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung eines von jQuery implementierten Karusselleffekts für einzeilige Ankündigungsaktivitäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!