<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.6jQuery实现新闻滚动</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//$('li').first().remove().appendTo('ul');
function autoPlay()
{
$('li').first().remove().appendTo('ul');
//方法1
/*$('li').each(function(index, element) {
if(index<3)
{
$(this).css('color','red');
}
else
{
$(this).css('color','blue');
}
});*/
//方法2
$('li').slice(0,3).css('color','green');
$('li').slice(3).css('color','pink');
}
var timer = null;
//通过按钮调用
$('#btn1').click(function(){
timer = setInterval(autoPlay,1000);
//每隔一秒钟执行一次autoPlay
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="新闻滚动">
<br>
<ul>
<li>热点新闻1</li>
<li>热点新闻2</li>
<li>热点新闻3</li>
<li>热点新闻4</li>
<li>热点新闻5</li>
<li>热点新闻6</li>
</ul>
</body>
</html>
效果图
