Javascript实例:豆瓣读书频道的轮播图特效
http://www.itjxue.com 2015-08-06 22:59 来源:未知 点击次数:
/** 豆瓣轮播图 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>