HTML JS正方形轮播,兼容性较好的web html原生js轮播器

第一步：前端样式以及html代码(图片自行添加)

css代码：

#container{

width: 1200px;

height: 400px;

margin:0 auto;

overflow: hidden;/*超出的图片垂直方向隐藏，水平方向也隐藏*/

position: relative;/*提供给子元素定位*/

}

#list{

width: 7200px;

height: 400px;

position: absolute;

}

#list img{

float:left;

}

#buttons{

position: absolute;/*参照父元素进行绝对定位*/

height: 10px;

width: 100px;

z-index: 2;

bottom: 20px;

margin: auto;

left: 0;

right: 0;

}

#buttons span{

cursor: pointer;

display: inline-block;

border:1px solid #fff;

width: 10px;

height: 10px;

border-radius: 50%;

margin-right: 5px;

float: left;

}

#buttons .on{

background-color: #5c307d;

}

.arrow{

cursor: pointer;

line-height: 40px;

text-align: center;

font-size: 36px;

width: 40px;

height: 40px;

position: absolute;

z-index: 2;

margin:auto;

top:0;

bottom: 0;

background-color: #d8d9d8;

color: #ffffff;

text-decoration: none;

border-radius: 50%;

display: none;

}

.arrow:hover{

background-color: #b2afaf;

}

#container:hover .arrow{

display: inline-block;

}

#prev{

left: 20px;

}

#next{

right: 20px;

}

html代码:

<

>

第二步:给前一张，下一张添按钮添加事件：

//下一页

window.οnlοad=function(){

var list=document.getElementById("list");//获取相册div，便于移动相册框的图片

var prev=document.getElementById('prev');//前一张图片按钮

var next=document.getElementById('next');//下一页按钮

next.οnclick=function(){

if(!(parseInt(list.style.left)<=-4800)){//向超过第5张图片不能继续向右

list.style.left=parseInt(list.style.left)-1200+"px";

}

};

prev.οnclick=function(){

if((parseInt(list.style.left)<0)){//向左超过第1张图片不能继续向左

list.style.left=parseInt(list.style.left)+1200+"px";

}

};

};

第三步：封装简化点击按钮事件(js部分，其他没有改变)

window.οnlοad=function(){

var list=document.getElementById("list");//获取相册div，便于移动相册框的图片

var prev=document.getElementById('prev');//前一张图片按钮

var next=document.getElementById('next');//下一页按钮

//上一页,下一页点击按钮函数

function animate(offset){

var left=list.style.left;//图片位置

var leftOffset=parseInt(left);//图片偏移量

if (offset==-1200) {

if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右

left=(leftOffset+offset)+'px';

list.style.left=left;

}

return;

}

if (offset==1200) {

if((leftOffset<0)){//向左超过第1张图片不能继续向左

left=(leftOffset+offset)+"px";

list.style.left=left;

}

}

}

next.οnclick=function(){

animate(-1200);

};

prev.οnclick=function(){

animate(1200);

};

};

第四步:图片切换对应小按钮样式改变

window.οnlοad=function(){

var list=document.getElementById("list");//获取相册div，便于移动相册框的图片

var prev=document.getElementById('prev');//前一张图片按钮

var next=document.getElementById('next');//下一页按钮

var index=1;//默认小按钮为1

var buttons=document.getElementById("buttons").getElementsByTagName('span');

//上一页,下一页点击按钮函数

function animate(offset){

var left=list.style.left;//图片位置

var leftOffset=parseInt(left);//图片偏移量

if (offset==-1200) {

if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右

left=(leftOffset+offset)+'px';

list.style.left=left;

}

return;

}

if (offset==1200) {

if((leftOffset<0)){//向左超过第1张图片不能继续向左

left=(leftOffset+offset)+"px";

list.style.left=left;

}

}

}

//按钮样式改变函数

function showButton(){

for (var i = 0; i

if (buttons[i].className=="on") {

buttons[i].className="";

break;

}

}

buttons[index-1].className="on";

}

next.οnclick=function(){

if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1

index=1;

}else{//不是第五个，就继续++

index+=1;

}

animate(-1200);

showButton();

};

prev.οnclick=function(){

if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5

index=1;

}else{//不是第1个，就继续--

index-=1;

}

animate(1200);

showButton();

};

};

第五步：图片无限左右切换

window.οnlοad=function(){

var list=document.getElementById("list");//获取相册div，便于移动相册框的图片

var prev=document.getElementById('prev');//前一张图片按钮

var next=document.getElementById('next');//下一页按钮

var index=1;//默认小按钮为1

var buttons=document.getElementById("buttons").getElementsByTagName('span');

//上一页,下一页点击按钮函数

function animate(offset){

var left=list.style.left;//图片位置

var leftOffset=parseInt(left);//图片偏移量

if (offset==-1200) {

if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右

left=(leftOffset+offset)+'px';

list.style.left=left;

}

if (leftOffset==-4800) {//超过第5张得时候重新回到第一张

list.style.left=0+'px';

index=1;//更新一下按钮

}

return;

}

if (offset==1200) {

if((leftOffset<0)){//向左超过第1张图片不能继续向左

left=(leftOffset+offset)+"px";

list.style.left=left;

}

if (leftOffset==0) {//超过第1张得时候重新回到第5张

list.style.left=-3600+'px';

index=5;//更新一下按钮

}

}

}

//按钮样式改变函数

function showButton(){

for (var i = 0; i

if (buttons[i].className=="on") {

buttons[i].className="";

break;

}

}

buttons[index-1].className="on";

}

next.οnclick=function(){

if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1

index=1;

}else{//不是第五个，就继续++

index+=1;

}

animate(-1200);

showButton();

};

prev.οnclick=function(){

if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5

index=1;

}else{//不是第1个，就继续--

index-=1;

}

animate(1200);

showButton();

};

};

第六步:小按钮的点击事件

window.οnlοad=function(){

var list=document.getElementById("list");//获取相册div，便于移动相册框的图片

var prev=document.getElementById('prev');//前一张图片按钮

var next=document.getElementById('next');//下一页按钮

var index=1;//默认小按钮为1

var buttons=document.getElementById("buttons").getElementsByTagName('span');

//上一页,下一页点击按钮函数

function animate(offset,jump="num"){

var left=list.style.left;//图片位置

var leftOffset=parseInt(left);//图片偏移量

if (offset==-1200&&jump=="num") {

if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右

left=(leftOffset+offset)+'px';

list.style.left=left;

}

if (leftOffset==-4800) {//超过第5张得时候重新回到第一张

list.style.left=0+'px';

index=1;//更新一下按钮

}

return;

}

if (offset==1200&&jump=="num") {

if((leftOffset<0)){//向左超过第1张图片不能继续向左

left=(leftOffset+offset)+"px";

list.style.left=left;

}

if (leftOffset==0) {//超过第1张得时候重新回到第5张

list.style.left=-3600+'px';

index=5;//更新一下按钮

}

return;

}

if (parseInt(jump)>0) {//向右跳转

var offsetjump=-1200*jump;

left=(leftOffset+offsetjump)+'px';

list.style.left=left;

return;

}

if (parseInt(jump)<0) {//向左跳转

var offsetjump=-1200*jump;

left=(leftOffset+offsetjump)+'px';

list.style.left=left;

return;

}

}

//按钮样式改变函数

function showButton(){

for (var i = 0; i

if (buttons[i].className=="on") {

buttons[i].className="";

break;

}

}

buttons[index-1].className="on";

}

next.οnclick=function(){

if (index==5) {//如果小按钮已经到了第五个小按钮，下一个小按钮切换回1

index=1;

}else{//不是第五个，就继续++

index+=1;

}

animate(-1200);

showButton();

};

prev.οnclick=function(){

if (index==1) {//如果小按钮已经到了第1个小按钮，上一个小按钮切换回5

index=1;

}else{//不是第1个，就继续--

index-=1;

}

animate(1200);

showButton();

};

//为每个小按钮绑定事件

for (var i = 0; i

buttons[i].οnclick=function(){

var myIndex=parseInt(this.getAttribute('index'));//当前按钮下标

if(myIndex-index>0){//向右偏移

animate(-1200,myIndex-index);

index=myIndex;//更新按钮

showButton();

}else{

animate(1200,myIndex-index);

index=myIndex;//更新按钮

showButton();

}

}

}

};

第七步：优化小按钮(点击同一个按钮不触发事件)

if (this.className=="on") {

return;

}

在buttoms循加入

第八步:给点击事件加动画