如今轮播图已然成为网站中的最常用功能功能之一,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果。今天就教教大家做一个仿京东的轮播图。
主要功能是图片自己轮播，也可根据左右按钮调控，也可根据下面的数字球控制。
<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()"><</a> <a class="arrow-r" href="javaScript:;" id="bo2" onclick="bo1()">></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>