Top

拉勾网图片特效实现一

效果图

源码实现

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>lagou</title>
  6     <style type="text/css">
  7          *{ margin: 0; padding: 0; }
  8          .clearfix:after { 
  9             content:".";
 10             display:block;
 11             height:0;
 12             visibility:hidden;
 13             clear:both;
 14         } 
 15         .clearfix { *zoom:1; }
 16         ul { list-style-type: none; } 
 17         a { text-decoration: none; } 
 18         .container { width: 750px; margin: 45px auto; overflow: hidden; height: 160px; }
 19         .content{ 
 20             float: left;
 21         }
 22         /*相邻选择器*/
 23         .content li+li { 
 24             margin-top: -3px;
 25         }
 26         .control {
 27             float: right;
 28             width: 121px;
 29             height: 160px;
 30             position: relative;
 31             right: 0;
 32             top: 0;
 33         }
 34         .control li { 
 35             width: 113px;
 36             height: 42px;
 37             border: 4px solid #ccc;
 38             position: relative;
 39         }
 40         .control li+li { 
 41             margin-top: 5px;
 42         }
 43         .control span { 
 44             background: url(images/thoum_selector.png) no-repeat;
 45             width:137px;
 46             height: 50px;
 47             position: absolute;
 48             z-index: 1;
 49             left: -6px;
 50         }
 51         #bg-1 { transition:all 0.2s; }
 52         #content { transition:all 0.2s; }
 53           
 54         .banner { width: 750px; top: 275px; left: 50%; margin-left: -375px; position: absolute; height: 113px; overflow: hidden; }
 55         .banner li{ float: left; border: 1px solid #e8e8e8; }
 56         .banner li+li { margin-left: 12px; }
 57         .hot-info { width: 113px; height: 113px; color: #fff; background-color: rgb(25,186,149); opacity: 0.8; transition: all 0.3s; }
 58         .hot-info h2{ padding-top: 10px; text-align: center; }
 59         .hot-info em { display: block; width: 99px; height: 5px; background-color: rgb(94,207,181); margin:4px 7px 10px; }
 60         .hot-info p{ line-height: 18px; font-size: 12px; margin: 6px 8px; }
 61         .banner ul li:hover .hot-info { margin-top:-116px; } 
 62     </style>
 63 
 64     <script type="text/javascript">
 65         window.onload=function(){ 
 66             function $(id){ 
 67                 return typeof id==='string'? document.getElementById(id):id;
 68             } 
 69             var control=$('control');
 70             var lis=control.getElementsByTagName('li');
 71             var span=$('bg-1');
 72             var content=$('content');
 73             var banner=$('banner');
 74             //var imgs=banner.getElementsByTagName('img');
 75             //var info=document.getElementsByClassName('hot-info');
 76             var timer = null;
 77             var index = 0;
 78 
 79             //自定义一个定时器
 80             //自定义一个标签index用于控制自动播放
 81             timer = setInterval(autoPlay, 5000);
 82 
 83             //初始化定时器
 84             content.onmouseover = control.onmouseover = function(){
 85                 clearInterval(timer);
 86                 change();
 87             }
 88             control.onmouseout = function(){
 89                  timer = setInterval(autoPlay, 5000);
 90             }
 91 
 92             function autoPlay(){
 93                 index++;
 94                 if (index>=lis.length) {
 95                     index = 0;
 96                 };
 97                 span.style.marginTop = index*55+'px';
 98                 content.style.marginTop = -index*160+'px';
 99             }
100             function change(){
101                 for (var i = 0; i < lis.length; i++) {
102                     lis[i].onmouseover = (function(i){
103                         return function(){
104                             content.style.marginTop = -i*160 + "px";
105                             span.style.marginTop = i*55 +"px";
106                             //当前图片索引
107                             index = i;
108                         }
109                     })(i)
110                 };
111             }  
112         }
113     </script>
114 </head>
115 <body>
116     <div class="container clearfix">
117         <div class="content" id="content">
118             <ul>
119                 <li><img src="images/banner_01.jpg"></li>
120                 <li><img src="images/banner_02.jpg"></li>
121                 <li><img src="images/banner_03.jpg"></li>
122             </ul>
123         </div>
124         <div class="control" id="control">
125             <span id="bg-1"></span>
126             <ul>
127                 <li><img src="images/thoum_01.jpg"></li>
128                 <li><img src="images/thoum_02.jpg"></li>
129                 <li><img src="images/thoum_03.jpg"></li>
130             </ul>
131         </div>
132     </div>
133 </body>
134 </html>

转载 拉勾网顶部轮播图的实现（一）以及简单闭包的应用

http://www.imooc.com/article/12809

 

posted @ 2016-09-09 23:47  Avenstar  阅读(247)  评论(0)    收藏  举报