京东轮播图代码

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

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

<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; ad = function(){ t = setInterval("bo1()", 4000); }function lunbo(num){a = num;var btn = lementById("circle")lementsByTagName("img")[0];for (var i=1;i<7;i++) {var li = lementById("circle")lementsByTagName("li")[i-1];groundColor = "#3E3E3E";if(num == i){ = "img/"+i+"p.jpg";groundColor = "#B61B1F";}}}function bo1(){if(a>=6){a = 0;}a++;lunbo(a);}function bo2(){if(a<=1){a = 7;}a--;lunbo(a);}</script>