һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

ԭjsʵbannerֲͼ͸л

[]
22002 happy175 2016-7-10 14:35:03
| ʾȫ¥
1F
Чͼ





  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>ԭjsʵbannerֲͼ͸л</title>
  6.                 <style>
  7.                         body,p,ul,li,ol,dl,dd,button,input,h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0;}
  8. ul,ol {list-style: none;}
  9. a {text-decoration: none;}
  10. img {display: block;border: none;}
  11. .clearfix {zoom: 1;}
  12. .clearfix:after {display: block;content: "";clear: both;}
  13. #banner-box{position:relative;width:800px;height:373px; margin: 30px auto 0; overflow: hidden; font-family: "΢ź";}
  14. #banner li{position: absolute;left: 0; top: 0; opacity: 0; filter: alpha(opacity= 0);}
  15. #banner-box img{width: 1024px; height: 373px;}
  16. #nav{position: absolute;right: 80px; bottom: 20px; z-index: 2;}
  17. #nav li{float: left; width:20px; height: 20px; margin: 0 6px; border-radius: 100%; background: #935B5B; color: #fff; text-align: center; line-height: 20px; font-size: 12px; cursor: pointer;}
  18. #nav li.cur,#nav li:hover{background: #E91E63;}
  19. #btn div{z-index:2;position: absolute; width:40px; height: 60px; background: #5C2C2C; top:155px; opacity: .3; filter:alpha(opacity=30); text-align: center; font-size: 40px; color: white; cursor: pointer; display: none;}
  20. .prev{left:30px;}
  21. .next{right:30px;}
  22. #banner-box div{display: block;}
  23. #banner-box:hover div:hover{opacity: 1; filter: alpha(opacity=100);}                        
  24.                 </style>
  25.         </head>
  26.         <body>
  27.                 <div id="banner-box">
  28.                         <ul id="banner">
  29.                                 <li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748pn3vheie1vczb81h.jpg"></li>
  30.                                 <li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183747p6lx3ftx2xeewex2.jpg"></li>
  31.                                 <li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748lxxuaea6fj1mhn6u.jpg"></li>
  32.                                 <li><img src="http://cdn.attach.w3cfuns.com/notes/pics/201607/06/183748nc7r2g4ki7jiht8h.jpg"></li>
  33.                         </ul>
  34.                         <ul id="nav">
  35.                                 <li class="cur">1</li><li>2</li><li>3</li><li>4</li>
  36.                         </ul>
  37.                         <div id="btn">
  38.                                 <div class="prev"><</div>
  39.                                 <div class="next">></div>
  40.                         </div>                        
  41.                 </div>
  42.                 <script type="text/javascript">
  43.                         var oBanner = document.getElementById("banner");
  44.                         var aBannerLi = oBanner.getElementsByTagName("li");
  45.                         var oNav = document.getElementById("nav");
  46.                         var aNavLi = oNav.getElementsByTagName("li");
  47.                         var oBtn = document.getElementById("btn");
  48.                         var oPrev = oBtn.getElementsByTagName("div")[0];
  49.                         var oNext = oBtn.getElementsByTagName("div")[1];
  50.                         var oBannerBox = document.getElementById("banner-box");
  51.                         var i = 0;
  52.                         aBannerLi[0].style.opacity = 1;
  53.                         aBannerLi[0].style.zIndex = 1;
  54.                         var timer = setInterval(move,3000);//filter
  55.                         for(var n = 0; n < aBannerLi.length; n++){
  56.                                 aBannerLi[n].index = n;
  57.                                 aBannerLi[n].onmouseover = function(){
  58.                                         console.log(this.index);
  59.                                 }
  60.                         }
  61.                         function move(){
  62.                                 clearInterval(timer);
  63.                                 i++;
  64.                                 for(var j = 0; j < aBannerLi.length; j++){
  65.                                         aBannerLi[j].style.zIndex = 0;
  66.                                         startMove(aBannerLi[j],{"opacity":0});
  67.                                 }
  68.                                 for(var k = 0; k < aNavLi.length; k++){
  69.                                         aNavLi[k].className = "";
  70.                                 }
  71.                                 if(i>=aBannerLi.length){
  72.                                         i = 0;
  73.                                 }                                
  74.                                 aNavLi[i].className = "cur";
  75.                                 aBannerLi[i].style.zIndex = 1;
  76.                                 startMove(aBannerLi[i],{"opacity":100},clear);
  77.                         }
  78.                         function clear(){
  79.                                 timer = setInterval(move,3000);
  80.                         }
  81.                         
  82.                         for(var m = 0; m < aNavLi.length; m++){
  83.                                 aNavLi[m].index = m;
  84.                                 aNavLi[m].onclick = function(){
  85.                                         i = this.index - 1;
  86.                                         move();
  87.                                 }
  88.                         }                        
  89.                         oPrev.onclick = function(){
  90.                                 if(i==0){
  91.                                         i=aBannerLi.length-2;
  92.                                 }else{
  93.                                         i = i - 2;
  94.                                 }
  95.                                 move();
  96.                         }
  97.                         oNext.onclick = function(){
  98.                                 move();
  99.                         }                        
  100.                         function getStyle(obj,attr){
  101.                                 if(obj.currentStyle){
  102.                                         return obj.currentStyle[attr]
  103.                                         }
  104.                                         else{
  105.                                                 return getComputedStyle(obj,false)[attr]
  106.                                                 }                                
  107.                         }
  108.                         function startMove(obj, json, fnEnd)
  109.                         {
  110.                             var MAX=18;
  111.                             clearInterval(obj.timer);
  112.                             obj.timer=setInterval(function (){                        
  113.                                 var bStop=true;                        
  114.                                 for(var name in json)
  115.                                 {
  116.                                     var iTarget=json[name];                        
  117.                                     if(name=='opacity')
  118.                                     {
  119.                                         var cur=Math.round(parseFloat(getStyle(obj, name))*100);
  120.                                     }
  121.                                     else
  122.                                     {
  123.                                         var cur=parseInt(getStyle(obj, name));
  124.                         
  125.                                     }
  126.                                     var speed=(iTarget-cur)/8;
  127.                         
  128.                                     speed=speed>0?Math.ceil(speed):Math.floor(speed);
  129.                         
  130.                                     if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
  131.                         
  132.                                     if(name=='opacity')
  133.                                     {
  134.                                         obj.style.filter='alpha(opacity:'+(cur+speed)+')';
  135.                                         obj.style.opacity=(cur+speed)/100; //ff chrome
  136.                                     }
  137.                                     else
  138.                                     {
  139.                                         obj.style[name]=cur+speed+'px';
  140.                                     }
  141.                                     if(cur!=iTarget)
  142.                                     {
  143.                                         bStop=false;
  144.                                     }
  145.                                 }
  146.                                 if(bStop)
  147.                                 {
  148.                                     clearInterval(obj.timer);
  149.                         
  150.                                     if(fnEnd)
  151.                                     {
  152.                                         fnEnd();
  153.                                     }
  154.                                 }
  155.                             },10);
  156.                         }                                                
  157.                 </script>
  158.         </body>
  159. </html>
ƴ



аԴ

Ҫ ¼ ſػ鿴ûʺţע  

x
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2016-12-2 08:58:58
| ʾȫ¥
2F
ǺܺõӶ
ȷӡˢ http://www.bjard.com
ӡˢ http://www.bjard.com
ȷֽ䳧 http://www.bjard.com
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2016-12-8 18:24:17
| ʾȫ¥
3F
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-9-23 18:22

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б