京东轮播图代码
如今轮播图已然成为网站中的`最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天就教教大家做一个仿京东的轮播图。
主要功能是图片自己轮播，也可根据左右按钮调控，也可根据下面的数字球控制。
<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>
js简易轮播图代码<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()"><</a> <a class="arrow-r" href="javaScript:;" id="bo2" onclick="bo1()">></a></div>
</div>
<script>
 
    var a = 1;
 
    var t = 0;
 
    load = function(){
 
    t = setInterval("bo1()", 4000);
 
    }
 
function lunbo(num){
 
a = num;
 
var btn = ElementById("circle").getElementsByTagName("img")[0];
 
for (var i=1;i<7;i++) {
 
var li = ElementById("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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。