js公告轮播代码


//首页公告
var $announcement = $('#announcement ul');
	var cheight = parseInt($('#announcement').css('line-height').split('p')[0]);
	var announcementLength = $announcement.find('li').length;
	var nowtop,nexttop;
	var announcementTimer = setInterval(function (){
		nowtop = parseInt($announcement.css('top').split('p')[0]);
		nexttop = 0;
		if(nowtop == (-(announcementLength - 1)*cheight)){
			nexttop = '0px';
		}else{
			nexttop = (nowtop - 30) + 'px';
		}
		console.log(nowtop + ' ' + (-(announcementLength - 1)*cheight));
		$announcement.animate({top:''+nexttop});
	},2000);
<div id="announcement">
        <ul>
            <li><a href="#">欢迎来到官方网站1!</a></li>
            <li><a href="#">欢迎来到官方网站2!</a></li>
            <li><a href="#">欢迎来到官方网站3!</a></li>
            <li><a href="#">欢迎来到官方网站4!</a></li>
        </ul>
    </div>

#announcement{ position:absolute; right:0; top:100px; width:300px; height:30px; line-height:30px; overflow:hidden;}
#announcement ul{ position:absolute; top:0;}
#announcement li{ height:30px; line-height:30px; overflow:hidden;}


展开阅读全文

没有更多推荐了,返回首页