js banner图片幻灯轮播


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js banner图片幻灯轮播</title>
<style type="text/css">
a{ text-decoration:none; color:#666; font-size:12px;}
body{ color:#666; font-size:12px;}
body,div,ul,li{padding:0px; margin:0px;}
img{ border:0px;}
.liList{background-color:#f5f5f5;}
#divForBanner{background-color:#FF0000; width:720px; height:322px;position:relative;}
#divForBanner li{display:none;}
#divForBannetNum{position:absolute; right:0;bottom:0;border:dotted #ccc 1px; }
#divForBannetNum a{ background-color:#000000; color:#FFFFFF; display:inline-block; padding:2px; margin-right:1px;}


</style>



<div class="liList">
  <ul>
    <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>
    <li><a href="#">cccccccccccccccccc</a></li>
  </ul>
</div>



<div id="divForBanner">
  <ul>
  
<li style="display:block;"><a onmouseover="mouseover(0)" onmouseout="mouseout(0)" href="#"><img src="../img/banner1.jpg" /></a></li>

    <li><a onmouseover="mouseover(1)" onmouseout="mouseout(1)" href="#"><img src="../img/banner2.jpg" /></a></li>
    
    <li><a onmouseover="mouseover(2)" onmouseout="mouseout(2)" href="#"><img src="../img/banner3.jpg" /></a></li>
    
  </ul>

<div id="divForBannetNum">
<a href="javascript:void(0);" onmouseover="mouseover(0)" onmouseout="mouseout(0)">
01</a>  
<a href="javascript:void(0);" onmouseover="mouseover(1)" onmouseout="mouseout(1)">02</a>  
<a href="javascript:void(0);" onmouseover="mouseover(2)" onmouseout="mouseout(2)">03</a>  
</div>

</div>





<div class="liList">
  <ul>
    <li><a href="#">ddddddddddddddddddddd</a></li>
    <li><a href="#">eeeeeeeeeeeeeeeeeeeee</a></li>
  </ul>
</div>



<script>
var i=0;
var timex;
bannerSlider();


function bannerSlider(){
    var divx=document.getElementById('divForBanner');
    var lix=divx.getElementsByTagName('li');
    //alert(lix.length);
    for(var u=0;u<lix.length;u++){
        lix[u].style.display='none';
    }
    if(i<lix.length-1){
        lix[i].style.display='block';
        i++;
    }
    else{
        lix[lix.length-1].style.display='block';
        i=0;
    }
    currentBanner(i);
    timex=setTimeout("bannerSlider()",2000);
}



function mouseover(index){
    clearTimeout(timex);
    var divx=document.getElementById('divForBanner');
    var lix=divx.getElementsByTagName('li');
    for(var u=0;u<lix.length;u++){
        lix[u].style.display='none';
    }
    lix[index].style.display='block';
    currentBanner(index);
}


function mouseout(index){
    timex=setTimeout("bannerSlider()",2000);
}


function currentBanner(iii){
    var num=document.getElementById('divForBannetNum');
    var ax=num.getElementsByTagName('A');
    for(var u=0;u<ax.length;u++){
        ax[u].style.backgroundColor='#333333';
    }
    ax[iii].style.backgroundColor='#ff0000';
}

</script>


    
    








程序运行结果如下,点击这里亲自运行看看