BreakingNews-jQuery新闻公告间歇滚动插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 BreakingNews-jQuery新闻公告间歇滚动插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为BreakingNews-jQuery新闻公告间歇滚动插件，属于站长常用代码" />
<title>BreakingNews-jQuery新闻公告间歇滚动插件</title>
<link rel="stylesheet" href="css/breakingnews.css">
<style>
body {color:#FFF;background-color: #38545d;}
.demo { width: 700px; margin: 0 auto;}
.demo1 { margin-top: 100px;}
.demo2 { margin-top: 50px;}
a{color:#FFF}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/breakingnews.js"></script>
<script>
$(function(){
	$('#breakingnews1').BreakingNews({
		title: '公告'
	});

	$('#breakingnews2').BreakingNews({
		title: '滚动新闻',
		titlebgcolor: '#099',
		linkhovercolor: '#099',
		border: '1px solid #099',
		timer: 4000,
		effect: 'slide'	
	});

});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div class="demo demo1">
    <h1>BreakingNews-jQuery间歇滚动插件</h1><br />
	<div class="BreakingNewsController easing" id="breakingnews1">
		<div class="bn-title"></div>
		<ul>
			<li><a href="#" target="_blank">jqueryrotate制作百度红包大放送抽奖效果</a></li>
			<li><a href="#" target="_blank">jQuery全屏滚动插件fullPage.js</a></li>
			<li><a href="#" target="_blank">fullPage.js制作网易邮箱6.0介绍页面</a></li>
			<li><a href="#" target="_blank">onepage-scroll制作iPhone 5s页面</a></li>
			<li><a href="#" target="_blank">强大实用的jQuery幻灯片插件Owl Carousel</a></li>
			<li><a href="#" target="_blank">slick制作17173 ChainJoy2014幻灯片</a></li>
		</ul>
		<div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
	</div>
</div>

<div class="demo demo2">
	<div class="BreakingNewsController easing" id="breakingnews2">
		<div class="bn-title"></div>
		<ul id="abc">
			<li><a href="#" target="_blank">jqueryrotate制作百度红包大放送抽奖效果</a></li>
			<li><a href="#" target="_blank">jQuery全屏滚动插件fullPage.js</a></li>
			<li><a href="#" target="_blank">fullPage.js制作网易邮箱6.0介绍页面</a></li>
			<li><a href="#" target="_blank">onepage-scroll制作iPhone 5s页面</a></li>
			<li><a href="#" target="_blank">强大实用的jQuery幻灯片插件Owl Carousel</a></li>
			<li><a href="#" target="_blank">slick制作17173 ChainJoy2014幻灯片</a></li>
		</ul>
		<div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>	
	</div>
</div>
</body>
</html>

JS代码(breakingnews.js):

(function(jQuery){
	$.fn.BreakingNews = function(settings){
	var defaults={
	background:'#FFF',title:'NEWS',titlecolor:'#FFF',titlebgcolor:'#5aa628',linkcolor:'#333',linkhovercolor:'#5aa628',fonttextsize:16,isbold:false,border:'none',width:'100%',autoplay:true,timer:3000,modulid:'brekingnews',effect:'fade'//or slide}
;
	var settings=$.extend(defaults,settings);
	return this.each(function(){
	settings.modulid="#"+$(this).attr("id");
	var timername=settings.modulid;
	var activenewsid=1;
	if (settings.isbold==true)fontw='bold';
	elsefontw='normal';
	if (settings.effect=='slide')$(settings.modulid+' ul li').css({
	'display':'block'}
);
	else$(settings.modulid+' ul li').css({
	'display':'none'}
);
	$(settings.modulid+' .bn-title').html(settings.title);
	$(settings.modulid).css({
	'width':settings.width,'background':settings.background,'border':settings.border,'font-size':settings.fonttextsize}
);
	$(settings.modulid+' ul').css({
	'left':$(settings.modulid+' .bn-title').width()+40}
);
	$(settings.modulid+' .bn-title').css({
	'background':settings.titlebgcolor,'color':settings.titlecolor,'font-weight':fontw}
);
	$(settings.modulid+' ul li a').css({
	'color':settings.linkcolor,'font-weight':fontw,'height':parseInt(settings.fonttextsize)+6}
);
	$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).css({
	'display':'block'}
);
	// Links hover events ......$(settings.modulid+' ul li a').hover(function(){
	$(this).css({
	'color':settings.linkhovercolor}
);
}
,function (){
	$(this).css({
	'color':settings.linkcolor}
);
}
);
	// Arrows Click Events ......$(settings.modulid+' .bn-arrows span').click(function(e){
	if ( $(this).attr('class')=="bn-arrows-left" )BnAutoPlay('prev');
	elseBnAutoPlay('next');
}
);
	// Timer events ...............if (settings.autoplay==true){
	timername=setInterval(function(){
	BnAutoPlay('next')}
,settings.timer);
	$(settings.modulid).hover(function(){
	clearInterval(timername);
}
,function(){
	timername=setInterval(function(){
	BnAutoPlay('next')}
,settings.timer);
}
);
}
else{
	clearInterval(timername);
}
//timer and click events function ...........function BnAutoPlay(pos){
	if ( pos=="next" ){
	if ( $(settings.modulid+' ul li').length>activenewsid )activenewsid++;
	elseactivenewsid=1;
}
else{
	if (activenewsid-2==-1)activenewsid=$(settings.modulid+' ul li').length;
	elseactivenewsid=activenewsid-1;
}
if (settings.effect=='fade'){
	$(settings.modulid+' ul li').css({
	'display':'none'}
);
	$(settings.modulid+' ul li').eq( parseInt(activenewsid-1) ).fadeIn();
}
else{
	$(settings.modulid+' ul').animate({
	'marginTop':-($(settings.modulid+' ul li').height()+20)*(activenewsid-1)}
);
}
}
// links size calgulating function ...........$(window).resize(function(e){
	if ( $(settings.modulid).width()<360 ){
	$(settings.modulid+' .bn-title').html('&nbsp;
	');
	$(settings.modulid+' .bn-title').css({
	'width':'4px','padding':'10px 0px'}
);
	$(settings.modulid+' ul').css({
	'left':4}
);
}
else{
	$(settings.modulid+' .bn-title').html(settings.title);
	$(settings.modulid+' .bn-title').css({
	'width':'auto','padding':'10px 20px'}
);
	$(settings.modulid+' ul').css({
	'left':$(settings.modulid+' .bn-title').width()+40}
);
}
}
);
}
);
}
;
}
)(jQuery);

CSS代码(breakingnews.css):

.BreakingNewsController{width:100%;overflow:hidden;background:#FFF;height:auto;position:relative;}
.BreakingNewsController .bn-title{display:inline-block;float:left;padding:10px 20px;background:#5aa628;color:#FFF;}
.BreakingNewsController ul{padding:0;margin:0;display:block;list-style:none;position:absolute;left:180px;right:50px;}
.BreakingNewsController ul li{list-style:none;padding:10px 20px;display:none;}
.BreakingNewsController ul li a{text-decoration:none;color:#333;display:inline-block;overflow:hidden;padding:0;}
.BreakingNewsController .bn-arrows{display:inline-block;float:right;width:50px;position:absolute;right:0;top:0;bottom:0;}
.BreakingNewsController .bn-arrows span{display:block;width:20px;position:absolute;top:0;bottom:0;cursor:pointer;opacity:0.2;}
.BreakingNewsController .bn-arrows span:hover{opacity:1;}
.BreakingNewsController .bn-arrows-left{left:0;background:url(../images/bn-arrows.png) left center no-repeat;}
.BreakingNewsController .bn-arrows-right{right:10px;background:url(../images/bn-arrows.png) right center no-repeat;}
.easing a,.easing span{transition:.25s linear;-moz-transition:.25s linear;-webkit-transition:.25s linear;}

附件:下载该文件资源,减少时间成本(增值服务)