广告通知单行滚动插件BreakingNews
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>广告通知单行滚动插件BreakingNews演示</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="//xcdn.php.cn/js/ads/广告通知单行滚动插件BreakingNews演示/css/BreakingNews.css">
<style>
body { background-color: #38545d;}
.demo { width: 700px; margin: 0 auto;}
.demo1 { margin-top: 100px;}
.demo2, .demo3 { margin-top: 50px;}
</style>
<script src="//xcdn.php.cn/js/ads/广告通知单行滚动插件BreakingNews演示/js/jquery-1.8.3.min.js"></script>
<script src="//xcdn.php.cn/js/ads/广告通知单行滚动插件BreakingNews演示/js/BreakingNews.js"></script>
<script>
$(function(){
$('#breakingnews1').BreakingNews({
title: '公告'
});
$('#breakingnews2').BreakingNews({
title: '滚动新闻',
titlebgcolor: '#099',
linkhovercolor: '#099',
border: '1px solid #099',
timer: 4000,
effect: 'slide'
});
$('#breakingnews3').BreakingNews({
title: '一月点击排行',
titlebgcolor: '#cf0c36',
linkhovercolor: '#099',
border: '1px solid #93221a',
timer: 5000,
effect: 'slide'
});
});
</script>
</head>
<body>
<!-- Demo start-->
<div class="demo demo1">
<div class="BreakingNewsController easing" id="breakingnews1">
<div class="bn-title"></div>
<ul>
<li><a href="https://www.niuniubbs.com/">网易邮箱6.0介绍上下滚动动画效果</a></li>
<li><a href="https://www.niuniubbs.com/">jQuery淡入无限加载瀑布流效果.js</a></li>
<li><a href="https://www.niuniubbs.com/">全屏页面滚动效果苹果官网页面上下滚动效果代码</a></li>
<li><a href="https://www.niuniubbs.com/">win8扁平风格宽屏焦点图片动画轮播代码</a></li>
<li><a href="https://www.niuniubbs.com/">带缩略图按钮控制图片左右滑动切换代码</a></li>
<li><a href="https://www.niuniubbs.com/">红木之家官网首页焦点大图</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="https://www.niuniubbs.com/">1. 淡出淡入带缩略图的广告图片切换效果代码</a></li>
<li><a href="https://www.niuniubbs.com/">2. myfocus焦点图插件24种demo焦点图片切换样式js代码</a></li>
<li><a href="https://www.niuniubbs.com/">3. html5自适应屏幕宽度网站焦点图片切换效果代码</a></li>
<li><a href="https://www.niuniubbs.com/">4. 宽屏带缩略图焦点图js代码</a></li>
<li><a href="https://www.niuniubbs.com/">5. 多种新闻焦点图片滑动切换效果</a></li>
<li><a href="https://www.niuniubbs.com/">6. 婚纱摄影网站宽屏图片幻灯片轮播切换效果代码</a></li>
<li><a href="https://www.niuniubbs.com/">7. 仿百度百家首页新闻焦点图切换效果代码</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 demo3">
<div class="BreakingNewsController easing" id="breakingnews3">
<div class="bn-title"></div>
<ul>
<li><a href="https://www.niuniubbs.com/">仿酷狗首页焦点图片文字标题切换效果代码</a></li>
<li><a href="https://www.niuniubbs.com/">纯色调支持缩略图和描述的焦点图代码</a></li>
<li><a href="https://www.niuniubbs.com/">2014南宁45届世锦赛首页焦点图</a></li>
<li><a href="https://www.niuniubbs.com/">原生JS实现3D效果轮播幻灯片效果</a></li>
<li><a href="https://www.niuniubbs.com/">腾讯娱乐图片频道满屏左右切换JS焦点图</a></li>
<li><a href="https://www.niuniubbs.com/">js腾讯视频网站焦点图</a></li>
</ul>
<div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>
</div>
</div>
<!-- Demo end -->
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
页:
[1]