本文實例為大家分享了jQuery實現廣告條滾動效果的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding: 0px;margin: 0px;}
#list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
#list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
var marginTop = 0;//注意命名
var scroll = true;
//定時函數，每150毫秒執行一次函數
setInterval(function(){
if(scroll){
$("#list li:first").animate( //第一個li開始執行動畫
{marginTop:marginTop--}, //設置上面的外邊距自減
0,
function(){ //動畫之后執行的函數
if( -marginTop==$(this).height()+1){ //判斷li移動的距離是否超過自身的高度
var $f = $(this); //復制一個li
$(this).remove(); //把第一個移除。第一個移除之后，第二個就自動變為第一個
marginTop=0;
$f.css("margin-top","0px");
$("ul").append($f); //把第一個追加加到列表的最后，變成一個無縫連接
}
}
);
}
},150);
$(function(){
$("ul").hover(function(){scroll = false;},function(){scroll = true;});
});
</script>
</head>
<body>
<div id="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
