Javascript实例:豆瓣读书频道的轮播图特效

2012-10-30 01:56:32  来源:网络 

网页制作Webjx文章简介:Javascript实例:豆瓣读书频道的轮播图特效。

/**
豆瓣轮播图
10月29日
*/
.db_box{ width:591px; margin:30px auto; border:1px solid red; padding: 0 23px 20px;}
.db_wrap{ position:relative; overflow:hidden; width:615px; height:149px;}
.db_list{ position:absolute;}
.db_list_ul{ float:left;}
.db_list_ul li{ float:left; height:151px; display:inline; margin-right:24px;}
.db_nav p{ color:#006600; font-size:14px; float:left; height:48px; line-height:48px;}
.db_nav p a{ margin-left:5px; color:#336699;}
.db_btns{ float:right; padding-top:13px;}
.db_btns a{ width:7px; height:7px; float:left; background:url(../images/db_nav_a.png) 0 0 no-repeat; margin:6px 5px 0 0; display:inline;}
.db_btns a.active{ background:url(../images/db_nav_aHov.png) 0 0 no-repeat; }
.db_btns em,.db_btns span{ width:18px; height:18px; float:left; margin-left:6px; display:inline; cursor:pointer;}
.db_btns em{ background:url(../images/db_nav_spanL.png) 0 0 no-repeat;}
.db_btns em.active{ background:url(../images/db_nav_spanHoverL.jpg) 0 0 no-repeat;}
.db_btns span{ background:url(../images/db_nav_spanR.png) 0 0 no-repeat;}
.db_btns span.active{ background:url(../images/db_nav_spanHoverR.jpg) 0 0 no-repeat;}
$(function(){
db_lbt();//豆瓣轮播图
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Author" content="xiewulong" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/lquery.js"></script>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/pngfix.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="db_box" id="db_box">
<div class="db_nav fix">
<p>新书速递-虚构类....<a href="###">(查看更多)</a></p>
<div class="db_btns fix">
<a href="###" class="active"></a><a href="###"></a><a href="###"></a><a href="###"></a><em></em><span class="active">
<div class="db_wrap">
<div class="db_list fix">
<ul class="db_list_ul fix">
<li><a href="###"><img src="images/db_list_li1.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li2.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li3.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li4.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li5.jpg"/></a></li>
</ul>
<ul class="db_list_ul fix">
<li><a href="###"><img src="images/db_list_li1.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li2.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li3.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li4.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li5.jpg"/></a></li>
</ul>
<ul class="db_list_ul fix">
<li><a href="###"><img src="images/db_list_li1.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li2.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li3.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li4.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li5.jpg"/></a></li>
</ul>
<ul class="db_list_ul fix">
<li><a href="###"><img src="images/db_list_li1.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li2.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li3.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li4.jpg"/></a></li>
<li><a href="###"><img src="images/db_list_li5.jpg"/></a></li>
</ul>
</body>
</html>
更多