zoukankan      html  css  js  c++  java

  • 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

    　　

    　　
  • 相关阅读:
    tensorflow2.0 GPU和CPU 时间对比
    第一次使用FileZilla Server
    PremiumSoft Navicat 15 for Oracle中文破解版安装教程
    Unmapped Spring configuration files found. Please configure Spring facet or use 'Create Default Context' to add one including all unmapped files.
    ng : 无法加载文件 D: odejs ode_global g.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
    angular
    Github上优秀的go项目
    win10---file explore 中remove quick access folder
    react--useEffect使用
    linux---cat 和 grep 的妙用
  • 原文地址：https://www.cnblogs.com/Johness/p/2513678.html
Copyright © 2011-2022 走看看