京東頁面 輪播圖代碼

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

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

<ul class="circle">

<!--移動鼠標觸發事件-->

<li class="current" onmouseover="lunbo(1)" id="ico1">1</li>

<li onmouseover="lunbo(2)" id="ico1">2</li>

<li onmouseover="lunbo(3)" id="ico1">3</li>

<li onmouseover="lunbo(4)" id="ico1">4</li>

<li onmouseover="lunbo(5)" id="ico1">5</li>

<li onmouseover="lunbo(6)" id="ico1">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 a = 1;

    var t = 0;

    window.onload = function(){

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

    }

function lunbo(num){

a = num;

var btn = 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){

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

li.style.backgroundColor = "#B61B1F";

}

}

 

}

function bo1(){

if(a>=6){

a = 0;

}

a++;

lunbo(a);

}

function bo2(){

if(a<=1){

a = 7;

}

a--;

lunbo(a);

}

</script>

PS:這段代碼是在個人京東項目中摘錄過來的，有不懂得能夠直接問我。主要功能是圖片本身輪播，也可根據左右按鈕調控，也可根據下面的數字球控制。