<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery+CSS3卷轴数字翻滚切换代码</title>
<link rel="stylesheet" href="dc_scroll.css">
<style>
html,body,div,ul,li{
margin:0;padding:0;
}
body{
background-color: rgba(47,47,47,1.00);
}
ul,li{
list-style: none;
}
.total-police-alert{
width: 500px;
height: 90px;
padding: 10px;
margin: 100px auto 0;
font: 36px "华文楷体";
line-height: 90px;
color: #fff;
box-shadow: -2px 2px 10px #000;
background-color: rgba(81,167,229,1.00);
border-radius: 10px;
}
.fl{
float:left;
}
.fr{
float:right;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="total-police-alert">
<div class="fl">卷轴控件</div>
<ul class="dc-scroll fr">
<li>
<div class="s-on"></div>
<div class="s-hide"></div>
</li>
<li>
<div class="s-on"></div>
<div class="s-hide"></div>
</li>
<li>
<div class="s-on"></div>
<div class="s-hide"></div>
</li>
<li>
<div class="s-on"></div>
<div class="s-hide"></div>
</li>
<li>
<div class="s-on"></div>
<div class="s-hide"></div>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/dc_scroll.js" type="text/javascript"></script>
<script>
//卷轴模块
var scroll = new Scroll({
dom : $(".dc-scroll"), //操作的节点
num : 5, //几个卷轮
delay : 3000 //时间间隔单位ms
});
scroll.run();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:red">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>