直接上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>序号</title>
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}
p,from,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;}
ul,ol,li{margin:0px;padding:0px;list-style:none;}
img{border:none;}
a{color:#333333;text-decoration:none;}
a:hover{color:#666666;text-decoration:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
#box{width:320px;height:480px;position:relative;overflow:hidden;}
#box li{width:320px;height:480px; background:#ccc; text-align:center; line-height:480px;}
#box ol{position:absolute;width:320px;z-index:99;left:0;bottom:10px; text-align:center;}
#box ol li{display:inline-block; text-align:center; width:24px; height:24px; line-height:24px; border:solid 1px #3F8AE3; cursor:pointer;}
#box ol li.current{background:#3F8AE3; color:#fff;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var index =0;
var timer = setInterval(function(){ //自动
index = (index == 0) ? 0 : index + 1;
$("#box ul li").hide().eq(index).show();
$('#box ol li').eq(index).addClass('current').siblings().removeClass('current');
}, 3000);
$("#box ol li").mouseover(function(){
var index = $(this).index();
$("#box ul li").eq(index).show().siblings().hide();
$(this).addClass('current').siblings().removeClass('current');
})
})
</script>
</head>
<body>
<div id="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
