JavaScript 輪播圖

這是我本身作的一個輪播圖,你們能夠看看 ,我還沒進行優化.有改進的地方能夠私聊

佈局什麼的大家本身搞定吧

<div class="slider" id="circle">

<a href=""><img src="img/6p.jpg" alt="" /></a>

`

<ul class="circle" >

<li onclick="lun(1)" id="ico1">1</li>

<li onclick="lun(2)" id="ico2">2</li>

<li onclick="lun(3)" id="ico3">3</li>

<li onclick="lun(4)" id="ico4">4</li>

<li onclick="lun(5)" id="ico5">5</li>

<li class="current" onclick="lun(6)" id="ico6">6</li>

</ul>

<div class="arrow">

<a href="javaScript:;" class="arrow-l"onclick="bo2()" id="bo1"><</a>

<a href="javaScript:;" class="arrow-r"onclick="bo1()" id="bo2">></a>

</div>

</div>

<script>

    var c = 0 ;

    var t ;

    window.onload = function () {

      t = setInterval("bo1()",5000);

     

       

    }

 

function lun(num){

c = num ;

      var  ptn = document.getElementById("circle").getElementsByTagName("img")[0];

         

    for (var i = 1 ; i < 7;i++ ) {

    var li = document.getElementById("circle").getElementsByTagName("li")[i-1];

    li.style.backgroundColor = "#3E3E3E";

   

    if (num == i) {

     

    ptn.src = "img/"+ i + "p.jpg";

      li.style.backgroundColor = "#B61B1F";

    }

    }

     

}

function bo1() {

     

        if(c>=6){

        c = 0 ;

        }

      c++;

      lun(c);

      }

function bo2() {

     

        if(c<=1){

        c = 7 ;

        }

      c--;

      lun(c);

      }

 

</script>