html+css+jQuery新闻公告间歇滚动特效

1、准备好需要用到的图标。

3、书写hmtl代艨位雅剖码。<div class="demo demo1"> <h1>百度经验</h1><br /> <div class="BreakingNewsController easing" id="breakingnews1"> <div class="bn-title"></div> <ul> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</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">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> <li><a href="#" target="_blank">百度经验百度经验百度经验</a></li> </ul> <div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div> </div></div>

5、书写并添加js代码。<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>

7、代码整体结构。