html小圆图轮播,小伙伴们，教你们做轮播焦点图。

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

@Siuisune ，@『GDragon〃』 ，@若情未始 ， @清水幽幽丶

小伙伴们，快来呀，我又用js写了一下，不过没有感觉很生硬，本来想加入那个运动函数的，但是能力有限，没有思路了。

小伙伴们凑合着看一下吧。

window.onload = function(){

var page = 1; //设置当前为第一页

var i = 4; //每版放四个图片

var container = getId('container'); /*获取外层容器*/

var prev = getId('prev'); /*向前按钮*/

var next = getId('next'); /*向后按钮*/

var imgContainer = getId('img_container'); /*图片展示区域*/

var imgBox = getId('imgbox'); /*放图片的盒子*/

var iWidth = parseInt(getStyle(imgContainer,'width')); /*图片展示区域的宽度，parseInt,字符串变为number*/

var len = imgBox.getElementsByTagName('li').length; /*列表的个数*/

var pageCount = Math.ceil(len/i); /*有几页*/

var circles = getId('circle').getElementsByTagName('span'); /*下面的索引小圆*/

var liPage = imgBox.getElementsByTagName('li'); /*列表*/

//向后按钮

next.onclick = function(){

if(imgBox.style.left == '-1800px'){

imgBox.style.left = 0;

page = 1;

}else{

imgBox.style.left = imgBox.offsetLeft - iWidth + 'px';

page++;

}

for(var i=0;i

circles[i].className = '';//先把小圆的类都去掉

}

circles[page-1].className = 'current'; //再给当前index添加类

}

//向前按钮

prev.onclick = function(){

if(imgBox.style.left == '0px'){

imgBox.style.left = '-1800px';

page = pageCount;

}else{

imgBox.style.left = imgBox.offsetLeft + iWidth + 'px';

page--;

}

for(var i=0;i

circles[i].className = '';

}

circles[page-1].className = 'current';

}

for(var i=0;i

circles[i].index = i;

circles[i].onclick = function(){

for(var j=0;j

circles[j].className = '';

}

circles[this.index].className = 'current';

imgBox.style.left = -iWidth*(this.index) + 'px';

}

}

}

//封装一个getId函数

function getId(id){

return typeof id === 'string'?document.getElementById(id):id;

}

//封装一个获取样式的函数,待会运动函数需要用到

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

}