Chinaunix首页 | 论坛 | 博客
  • 博客访问: 574784
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2052
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

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. }

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

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

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. //轮播器计数器初始化

  21.     var banner_index = 1;

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

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


点击(此处)折叠或打开

  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. }



阅读(558) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册