Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 961639
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
简单广告轮播器

分类： jQuery

2016-09-23 14:20:38



html代码：

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <link rel="stylesheet" href="css/1.css" />
  7.         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  8.         <script type="text/javascript" src="js/2.js"></script>
  9.         <script type="text/javascript" src="js/1.js"></script>
  10.     </head>
  11.     <body>
  12.         <div id="banner">
  13.             <img src="img/1.jpg" alt="轮播器第一张" />
  14.             <img src="img/ss.jpg" alt="轮播器第二张" />
  15.             <img src="img/yy.jpg" alt="轮播器第三张" />
  16.             <ul>
  17.                 <li class="banner1">●</li>
  18.                 <li class="banner2">●</li>
  19.                 <li class="banner3">●</li>
  20.             </ul>
  21.             <span></span>
  22.             <strong></strong>
  23.         </div>
  24.     </body>
  25. </html>
css代码：

点击(此处)折叠或打开

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. ul{
  6.     list-style: none;
  7. }

  9. #banner{
  10.     width::100%;
  11.     height: 500px;
  12.     position: relative;
  13. }
  14. #banner img{
  15.     width: 100%;
  16.     display: block;
  17.     position: absolute;
  18.     top: 0;
  19.     left: 0;
  20.     z-index: 1;
  21. }

  23. #banner ul{
  24.     position: absolute;
  25.     top: 665px;
  26.     left: 800px;
  27.     z-index: 4;
  28. }
  29. #banner ul li{
  30.     float:left;
  31.     padding: 0 5px ;
  32.     font-size: 20px;
  33.     cursor: pointer;
  34.     color: white;
  35. }
  36. #banner span{
  37.     display: block;
  38.     width:100%;
  39.     height:50px;
  40.     background: #333;
  41.     position: absolute;
  42.     top: 650px;
  43.     left: 0;
  44.     opacity: 0.3;
  45.     filter: alpha(opacity = 30);
  46.     z-index: 3;
  47. }
  48. #banner strong{
  49.     position: absolute;
  50.     top: 665px;
  51.     left: 10px;
  52.     color: #fff;
  53.     z-index: 4;
  54. }

js代码：

点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     $(function(){
  4.         
  5.     //轮播器初始化
  6.     
  7.     var $img = $("#banner img");
  8.     $("#banner img").css("display","none");
  9.     $("#banner img").eq(0).css("display","block");
  10. //    $("#banner img").css("opacity","0");
  11. //    $("#banner img").eq(0).css("opacity","100");
  12.     $("#banner li").eq(0).css("color","black");
  13.     $("#banner strong").html($("#banner img").eq(0).attr('alt'));
  14. //    console.log($("#banner img").eq(0).first().alt);
  15.     
  16. //    console.log($("#banner img").eq(0).getAttribute('alt'));
  17. //    for(var i = 0 ;i < $img.length ; i++){
  18. //        console.log($img[i].getAttribute('alt'));    
  19. //    }
  20. //轮播器计数器初始化

  22.     var banner_index = 1;

  24. //自动轮播器
  25.     var banner_timer= setInterval(banner_fn,1000);
  26.     

  28. //手动轮播器
  29.     $("#banner ul li").hover(function(){
  30.         clearInterval(banner_timer);
  31.         banner(this);
  32.         
  33.     },function(){
  34.         
  35.         banner_index = $(this).index() +1;
  36.         banner_timer= setInterval(banner_fn,1000);
  37.         
  38.     });
  39.         
  40.         
  41.         
  42.         
  43.         
  44.     function banner(obj){
  45.         
  46.         $("#banner img").css("display","none");
  47.         $("#banner img").eq($(obj).index()).css("display","block");
  48.         $("#banner li").css("color","white");
  49.         $(obj).css("color","#333");
  50.         $("#banner strong").html($("#banner img").eq( $(obj).index()).attr('alt'));
  51.         
  52.         
  53. //        $("#banner img").eq($(obj).index()).animate({
  54. //            attr:'o',
  55. //            target:100,
  56. //            t:30,
  57. //            step:10
  58. //            
  59. //        });
  60.     }
  61.         
  62.     function banner_fn(){
  63.         
  64.         if(banner_index>= $("#banner ul li").length) banner_index =0;
  65.         banner($("#banner li").eq(banner_index).first());
  66.         banner_index++;
  67.     }
  68.         
  69.     
  70.     
  71.     
  72.     
  73.     
  74.     
  75.     
  76.     
  77.     
  78.     
  79.     
  80.     
  81.     
  82.     
  83.     })
  84.     
  85.     
  86.     
  87. }


点击(此处)折叠或打开

  1. window.onload = function(){
  2.     
  3.     
  4.     //获取某一节点的属性
  5.     Base.prototype.attr = function(attr){
  6.         return this.elements[0][attr];
  7.     }
  8.     //获取某一节点在整个几点组中是第几个索引
  9.     
  10.     Base.prototype.index =function(){
  11.         var children = this.elements[0].parentNode.children;
  12.         for( var i=0;i<children.length;i++){
  13.             if(this.elements[0] == children[i]) return i;
  14.         }
  15.         
  16.         
  17.     };
  18.     
  19.     
  20.     
  21. //设置某个节点的透明度    
  22.     Base.prototype.opacity = function(num){
  23.         for( var i=0;i<this.elements.length;i++){
  24.             this.element[i].style.opacity = num/100;
  25.             this.element[i].style.filter = "alpha(opacity='+ num +')";
  26.         }
  27.         return this;
  28.     }
  29.     
  30.     
  31.     //获取当前几点的上一个节点元素
  32.     Base.prototype.prev = function(){
  33.         for(var i=0;i<this.elements.length;i++){
  34.             this.elements[i] = this.elements[i].previousSibling;
  35.             if(this.elements[i] == null) throw new Error("找不到一个同级元素节点！");
  36.             if(this.elements[i].nodeType == 0)this.next();
  37.         }
  38.         return this;
  39.     }
  40.     
  41.     
  42.     
  43.     
  44.     
  45. }



阅读(1218) | 评论(0) | 转发(0) |
0

上一篇：hover的对子集以及同级兄弟元素的操作

下一篇：title 添加logo图片

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6