Html——简单CSS实例之带数字导航的横幅效果 

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
  3     <head>
  4         <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
  5         <title> 带数字导航的横幅效果 </title>
  6         <style type="text/css">
  7 
  8             /* 通用选择器，设定无内外边距，无边框等……边框的去除在图片按钮时特别有用 */
  9             *{
 10                 margin:0px;
 11                 padding:0px;
 12                 border:0px;
 13             }
 14 
 15             /* 为数字导航广告层设置样式，值得一提的是，不管在什么地方设置宽度都是必要的，忘记了会出问题的 
 16              * 使用了margin:0 auto;来造成居中效果。
 17              */
 18             #add_pic_nav{
 19                 height: 224px;
 20                 width: 426px;
 21                 background-image: url(images/adRotator_1.jpg);
 22                 margin:0 auto;
 23             }
 24 
 25             /* 这里设置数字广告导航层内无需列表的的样式，我这里用了可能不是很好的做法，使用内边距将数字‘顶’下来的。宽度我设置了自动，可能也有问题 */
 26             #add_pic_nav ul:first-child{padding-top:204px;width:auto;}
 27 
 28             /* 这里设置列表项的样式，那么我为了使界面更加友好，做了一些处理，列表样式中的编号清除可以放在标签选择器（类型选择器）中 */
 29             #add_pic_nav ul:first-child li{
 30                 list-style:none;
 31                 color: #FFF;
 32                 background-color: #9E2E07;
 33                 width:18px;
 34                 height:18px;
 35                 margin-left:10px;
 36                 cursor:pointer;
 37                 float:left;
 38                 text-align:center}
 39 
 40             /* 改变第一个数字前的左外边距，造成对称效果 */
 41             #add_pic_nav ul:first-child li:first-child{margin-left:18px}
 42 
 43             /* 清除非数字项浮动，这里的主要母的是清除最后一个数字后的浮动 */
 44             ul:first-child :not(li){clear:both}
 45 
 46             /* 被激活显示的页面，当前显示的广告图片和介绍 */
 47             #add_pic_nav ul li[class~="active"]{
 48                 list-style:none;
 49                 color:#8C2806;
 50                 font-size:14px;
 51                 width:280px;
 52                 margin-left:10px;
 53                 cursor:pointer;
 54                 float:left;
 55                 background-color:#FFF;
 56                 text-align:center;}
 57         </style>
 58 
 59 
 60         <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
 61         <script type="text/javascript">
 62             /* 第一个数组，用来存储标题 */
 63             var title=new Array();
 64                 title[0]="1.店庆第一波 限时抢购 一日三疯！"
 65                 title[1]="2.十年店庆均价场 39/99/169专场！"
 66                 title[2]="3.全场69折封顶 享当当的超值低价！"
 67                 title[3]="4.店庆钜献 海量图书69折封顶"
 68                 title[4]="5.十年店庆 名家跨界祝贺 珍藏签名本专区"
 69 
 70             /* 第二个数组，用来存储图片 */
 71             var urls = new Array();
 72                 var firNo = 1;
 73                 var lastNo = 5;
 74                 for(var i = firNo; i <= lastNo; i++){
 75                     urls[i] = "url(images/adRotator_" + i + ".jpg)";
 76                 }
 77 
 78             /* 窗体加载完成后的事件 */
 79             window.onload=function(){
 80             /* 为li点击事件注册方法，语法值得注意 */
 81                 $('#add_pic_nav > ul > li').on('click',
 82                                                 function(){
 83                                                     show($(this).text().charAt(0)
 84                                                     );
 85                                                 }
 86                                             );
 87                 /* 网页内容一经加载成功，即开始切换广告显示 */
 88                 show(firNo);
 89                 }
 90             
 91             /* 重要属性，用于标记当前显示的图片编号 */
 92             var NowNO = 1;
 93             /* 重要属性，用以标记当前使用的计时器 */
 94             var t;
 95 
 96             /* 显示变换广告图片的方法 */
 97             function show(index){
 98 
 99                 /* 如果传递了数值 */
100                 if(!isNaN(index)){
101                     if(t != null){
102                         /* 如果当前有计时器在使用 */
103                         /* 清除正在使用的计时器，这很重要，可以减少资源浪费 */
104                         /* 即时在此处无效，也希望大家有这个意识 */
105                         /* 而且在此处计时器会产生干扰 */
106                         clearTimeout(t);
107                     }
108 
109                     /* 将传入的数值作为当前显示的图片和标题编号 */
110                     NowNO = index;
111 
112                     /* 通过传入项索引参数获取到当前需要显示的广告内容的项的表达式 */
113                     var str_cur_index = "li:nth-child(" + index + ")";
114 
115                     /* 获取非当前显示的项的表达式 */
116                     var str_other_index = ":nth-child(" + index + ")";
117 
118                     /* 为当前显示的广告内容设置响应文本 */
119                     $('#add_pic_nav > ul').children(str_cur_index).text(title[index - 1]);
120 
121                     /* 为当前显示的广告内容导航信息设置样式 */
122                     $('#add_pic_nav > ul').children(str_cur_index).addClass('active');
123 
124                     /* 为当前无需显示的广告内容导航设置文本 */
125                     $('#add_pic_nav > ul > li').not(str_other_index).each(function(i){
126                         this.innerHTML = $(this).text().charAt(0);
127                     });
128 
129                     /* 为当前无需显示的广告内容导航设置样式 */
130                     $('#add_pic_nav > ul > li').not(str_other_index).removeClass('active');
131 
132                     /* 设置当前显示的图片 */
133                     $('div#add_pic_nav').css("background-image",urls[index]);
134                     
135                     /* 以無参形式继续调用方法，实现图片不停止地切换 */
136                     show();
137                     /* 本次方法使用完毕，强制返回 */
138                     return;
139                 }
140                 else{
141                     if(t != null){
142                         /* 同上 */
143                         clearTimeout(t);
144                     }
145                     /* 判断此时是第几张图片在显示，如果是最后一张，则设置一个计时器显示第一张 */
146                     /* 如果当前不是最后一张图片，则把显示下一张图片添加到计划任务 */
147                     t = NowNO >= lastNo ? setTimeout('show(firNo)',2000):setTimeout('show(NowNO)',2000);
148                     NowNO++;
149                 }
150             }
151         </script>
152     </head>
153 
154  <body>
155     <div id="add_pic_nav">
156         <ul>
157             <li>1</li>
158             <li>2</li>
159             <li>3</li>
160             <li>4</li>
161             <li>5</li>
162         </ul>
163     </div><!--end of add_pic_nav-->
164  </body>
165 </html>

　　具体的方法和步骤上面的代码差不多已经提到了。

　　有兴趣可以试试把上面的做成插件。只给图片完全路径，通过动态手段生成div块。最好需要的参数只是：①某一张图片的路径加完全文件名（当然名称要有规律）②需要生成的div的ID名（或类名）。如果还有的话可以是div的坐标等。

　　以上的做法很多不得当，我给自己找的毛病首先是不应该使用绝对坐标。虽然漏洞很多，但总归是我对jQuery和CSS高级运用的一些探索。

　　大家可以稍微看看。

　　2012-05-23 17:06:05

　　

　　

posted @ 2012-05-22 18:02  云中双月  阅读(4793)  评论(2)  编辑  收藏  举报