Example sharing of single-line announcement activity carousel effect implemented by jQuery

This article introduces you to the single-line announcement activity carousel effect based on jQuery through example code. It is very good. The code is simple and easy to understand and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Without further ado, I will post the code directly for you. The specific code is as follows:

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

Related recommendations:

10 lines of js code to achieve the effect of scrolling up and down announcements

Use jQuery to implement the function of timing pop-up advertisements on the page

javascript implementation Tutorial on looping advertising banner effect method

The above is the detailed content of Example sharing of single-line announcement activity carousel effect implemented by jQuery. For more information, please follow other related articles on the PHP Chinese website!