本文实例为大家分享了jQuery实现广告条滚动效果的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt; style>
*{填充:0 px;保证金:0 px;}
#{列表宽度:150 px;高度:310 px;保证金:0 px汽车;边界:1 px固体# ccc;溢出:隐藏;}
#列表li {list-style:没有;高度:30 px;行高:30 px;边界底部:1 px冲# 999;}
& lt;/style>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-1.8.3.js "祝辞& lt;/script>
& lt; script>
var marginTop=0;//注意命名
var=true滚动;//定时函数,每150毫秒执行一次函数
setInterval(函数(){
如果(滚动){
$(" #列表li:第一”)。动画(//第一个李开始执行动画
{marginTop: marginTop——},//设置上面的外边距自减
0，
函数(){//动画之后执行的函数
如果(-marginTop==$ () .height() + 1){//判断李移动的距离是否超过自身的高度
var f=美元(这);//复制一个李
(美元).remove ();//把第一个移除第。一个移除之后,第二个就自动变为第一个
marginTop=0;
美元f.css (“margin-top”、“0 px”);
$ (“ul”) .append ($ f);//把第一个追加加到列表的最后,变成一个无缝连接
}
}
);
}
},150);
$(函数(){
$ (“ul”) .hover(函数(){滚动=false;},函数(){滚动=true;});
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=傲斜怼北?
& lt; ul>
& lt; li> 1 & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt; li> 5 & lt;/li>
& lt; li> 6 & lt;/li>
& lt; li> 7 & lt;/li>
& lt; li> 8 & lt;/li>
& lt; li> 9 & lt;/li>
& lt; li> 10 & lt;/li>
& lt; li> 11 & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;/html>
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
