菜单组轮播

来源：互联网发布：知乎放假编辑：程序博客网时间：2024/05/21 05:24

需求：专业列表需要动态加载，当专业比较多时需要分组。。

实现：

<!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=utf-8" />
<style>
.BreakingNewsController{width:100%; overflow:hidden; background:#FFF; height:auto; position:relative;}
.BreakingNewsController .bn-title{float:left; height:30px;width:0;}
.BreakingNewsController ul{padding:0; margin:0; display:block; list-style:none; position:absolute; left:180px; right:50px;}
.BreakingNewsController ul li{list-style:none;display:none;}
.BreakingNewsController ul li a{text-decoration:none; color:#333; display:inline-block; overflow:hidden; }
.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(img/bn-arrows.png) left center no-repeat;}
.BreakingNewsController .bn-arrows-right{right:10px; background:url(img/bn-arrows.png) right center no-repeat;}
.easing a, .easing span{transition:.25s linear; -moz-transition:.25s linear; -webkit-transition:.25s linear;}

.specialtyBar{
float:left;
text-align:center;min-width:100px;height:30px;line-height:30px;background-color:#3C3C3C;color:white;cursor:pointer;
}
.specialtyBar:hover{
float:left;
text-align:center;min-width:100px;height:30px;line-height:30px;background-color:#CB3A4B;color:white;cursor:pointer;
}
</style>
<script src="js/jQuery.js"></script>
<script src="js/BreakingNews.js"></script>
<script>
$(document).ready(function(){
$("#breakingnews1").BreakingNews({
title : ' ',
timer :24 * 24 * 60,
titlebgcolor :'#099',
background :'#3C3C3C'
});
});
</script>
</head>
<body>
<div style="width:690px;">
<div class="BreakingNewsController easing" id="breakingnews1">
<div class="bn-title"></div>
<ul>
<li>
<div class="specialtyBar">医学1</div>
<div class="specialtyBar">医学2</div>
<div class="specialtyBar">医学3</div>
<div class="specialtyBar">医学4</div>
<div class="specialtyBar">医学5</div>
<div class="specialtyBar" style="float:right;">所有课程</div>
</li>
<li>
<div class="specialtyBar">医学6</div>
<div class="specialtyBar">医学7</div>
<div class="specialtyBar">医学8</div>
<div class="specialtyBar">医学9</div>
<div class="specialtyBar">医学10</div>
<div class="specialtyBar" style="float:right;">所有课程</div>
</li>
</ul>
<div class="bn-arrows"><span class="bn-arrows-left"></span><span class="bn-arrows-right"></span></div>
</div>
</div>
</body>
</html>

0 0