京东轮播图代码

　　如今轮播图已然成为网站中的最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天就教教大家做一个仿京东的'轮播图。

　　主要功能是图片自己轮播，也可根据左右按钮调控，也可根据下面的数字球控制。

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

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

<ul class="circle">

<!--移动鼠标触发事件-->

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

1</li>

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

2</li>

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

3</li>

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

4</li>

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

5</li>

<li id="ico1" onmouseover="lunbo(6)">

6</li>

</ul>

<div class="arrow">

<a class="arrow-l" href="javaScript:;" id="bo1" onclick="bo2()">&lt;</a> <a class="arrow-r" href="javaScript:;" id="bo2" onclick="bo1()">&gt;</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>