广告轮播效果

之前公司仿支付宝做的一个登录页，需广告从中间向两边平铺整个页面即宽度为100%，广告有轮播的效果。以下是代码：

html：

 1 <div class="banner" id="slidebox">
 2                <ul class="bglist">
 3                  <li class="current list_one"></li>
 4                  <li class="list_two"></li>
 5                </ul>
 6                <ul class="countbtn">
 7                  <li class="current"></li>
 8                  <li></li>
 9                </ul>  
10 </div>

View Code

css:

1 .banner{ position:absolute; left:0; top:72px; width:100%; height:550px;}
2 .banner .bglist{ position:relative; width:100%; height:550px; overflow:hidden; background-color:#FFF;}
3 .banner .bglist li{ position:absolute; top:0; left:0; width:100%; height:550px; opacity:0;filter:alpha(opacity=0);}
4 .banner .bglist li.list_one{background:url(../images/login_02.jpg) no-repeat center center;}
5 .banner .bglist li.list_two{background:url(../images/login_01.jpg) no-repeat center center;}
6 .banner .bglist li.current{opacity:1;filter:alpha(opacity=100);}
7 .login_box .banner .countbtn{ position:absolute; left:45%; bottom:22px}
8 .banner .countbtn li{float:left; width:15px; height:15px; background:url(../images/login_btn_32.png) no-repeat; cursor:pointer; margin-right:25px; overflow:hidden; opacity:0.7;filter:alpha(opacity=70); cursor:pointer;}
9 .banner .countbtn li.current{ background:url(../images/login_btn_30.png) no-repeat; opacity:1; filter:alpha(opacity=100);}

View Code

js:

 1 //slide自动播放
 2 function slide_focus(){
 3     var oBox = document.getElementById("slidebox");
 4     var aUl = oBox.getElementsByTagName("ul");
 5     var aImg = aUl[0].getElementsByTagName("li");
 6     var aNum = aUl[1].getElementsByTagName("li");
 7     var timer = null;
 8     var play = null;
 9     var i = 0;
10     var index = 0;    
11     var bOrder = true;
12     
13     for (i = 0; i < aNum.length; i++)
14     {
15         aNum[i].index = i;
16         aNum[i].onclick = function ()
17         {
18             show(this.index);
19         };
20     }
21     oBox.onmouseover = function (){  clearInterval(play);    };
22     oBox.onmouseout = function (){   autoPlay(); };
23     function autoPlay ()
24     {
25         play = setInterval(function () {
26             bOrder ? index++ : index--;            
27             index >= aImg.length - 1 && (index = aImg.length - 1, bOrder = false);
28             index <= 0 && (index = 0, bOrder = true);
29             show(index);
30         },5000);    
31     }
32     autoPlay();
33     function show (a)
34     {
35         index = a;
36         var alpha = 0;
37         for (i = 0; i < aNum.length; i++)aNum[i].className = "";
38         aNum[index].className = "current";
39         clearInterval(timer);            
40         for (i = 0; i < aImg.length; i++)
41         {
42             aImg[i].style.opacity = 0;
43             aImg[i].style.filter = "alpha(opacity=0)";    
44         }
45         timer = setInterval(function () {
46             alpha += 2;
47             alpha > 100 && (alpha =100);
48             aImg[index].style.opacity = alpha / 100;
49             aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
50             alpha == 100 && clearInterval(timer);
51         },50);
52     }
53    }

View Code