详细简单的php图片轮播,几分钟让你学会简单的图片轮播

图片轮播的方法有很多种，这里我用一种简单的方法。

功能

点击左右箭头能够自由切换上一张图片和下一张图片

利用定时器和函数递归来实现图片间歇切换和动画切换

聚焦原点跟随图片的切换和改变，点击聚焦原点也可以切换图片

(ps: 样式代码自己随便写即可)

• 
• 
• 
• 
• 
• 

首先，要有一个大概的思路就是

在最外层有一个父包含块outerWrapper(长宽设为一张图片的大小),里面有一个图片包含块img-wrapper(宽度为所有图片的宽度和，高度和图片一样)。

设置父包含块outerWrapper的display:hidden ，图片包含块img-wrapper中的img设为浮动的，这样所有图片在一行，并且每次只能看到一张图片，其他都被隐藏了。(注意图片中的第一张和最后一张，这样做是为了无缝隙的从第一张切换到最后一张，从最后一张切换到第一张)。

设置父包含块outerWrapper oposition:relative,图片包含块img-wrapper``oposition:relative,添加内联样式

.

通过改变 img-wrapper 的left 值就可以实现图片的切换。所有可以写一个改变left值得函数，给左右箭头的点击事件添加这个函数，也可以将聚焦原点 的点击事件添加这个函数，实现点击聚焦原点改变图片

怎样让 聚焦原点 跟着图片的切换而改变？可以设一个变量activeSpan变量，取得聚焦原点的数组，然后当点击左右箭头的时候改变activeSpan的值从而改变对应的原点的样式。

以下是代码实现

先取得各变量的值

var outerWrapper = document.querySelector("#outerWrapper"),

//代表左箭头

slideLeft = outerWrapper.querySelector('#arrow-left'),

//代表右箭头

slideRight = outerWrapper.querySelector('#arrow-right'),

//图片包含块

imgWrapper = outerWrapper.querySelector('.img-wrapper'),

//图片的数量

imgNumber = outerWrapper.querySelectorAll('#get-imgs img').length,

//包含聚焦原点的数组

spans = outerWrapper.querySelectorAll('#focus-circle span'),

//对应聚焦原点的数组，对应图片的聚焦原点的下标值，开始为第一张图片，所以为0

activeSpan = 0,

//判断是否正在切换图片，如果正在切换图片点击按钮切换图片无效

flag = true;

//间隙切换图片的定时器

timer = null,

//每次切换图片改变的偏移量，与一张图片的宽度相同

offset = 600;

改变left值得函数

function changeLeft(offset){

//因为后面多次要用到parseInt(imgWrapper.style.left) + offset的值，所以可以赋给一个变量，这样更方便

//newLeft 代表图片包含块imgWrapper加上偏移量后的数值

//就表示你要将图片移动多少

var newLeft = parseInt(imgWrapper.style.left) + offset,

//切换到另一张图片经过几次间隔

interval = 5;

if(Math.abs(offset)>600*2){

interval = 2;

}

//每次间隔移动多大的距离，相当于从一张图片移动到另一张的速度

var speed = offset/interval,

//递归调用的时间

time = 100,

flag = false;

//一个自执行的函数，目的就是每次移动一部分的距离，直到移到自己想到的地方

(function(){

if((offset<0&&parseInt(imgWrapper.style.left)>newLeft)||(offset>0&&parseInt(imgWrapper.style.left)

imgWrapper.style.left = parseInt(imgWrapper.style.left)+speed+'px';

setTimeout(arguments.callee,time);

}else{

flag = true;

imgWrapper.style.left = newLeft + 'px';

//如果移到最后一张图片，下次切换就变到第一张，从第一张到最后一张也一样

if(newLeft === -(imgNumber-1)*Math.abs(offset)){

imgWrapper.style.left = -Math.abs(offset) + 'px';

}else if(newLeft === 0){

imgWrapper.style.left = -(imgNumber-2)*Math.abs(offset) + 'px';

}

}

})();

}

改变聚焦原点的函数

function changeFocus(index){

if(index === spans.length){

index = 0;

}else if(index === -1){

index = (spans.length-1);

}

activeSpan = index;

outerWrapper.querySelector('#focus-circle span.active').classList.remove('active');

spans[index].classList.add('active');

}

左右箭头点击的函数

slideLeft.onclick = ()=>{

if(flag){

activeSpan--;

changeLeft(offset);

changeFocus(activeSpan);

}

};

slideRight.onclick = ()=>{

if(flag){

activeSpan++;

changeLeft(-offset);

changeFocus(activeSpan);

}

};

点击聚焦原点的函数

for(var i=0,len=spans.length;i

spans[i].index = i;

spans[i].onclick = function(){

if(this.index !== activeSpan){

changeLeft((activeSpan-this.index)*600);

activeSpan = this.index;

changeFocus(activeSpan);

}

}

}

//设置定时器，实现每 2 秒自动切换一次图片

timer = setInterval(slideLeft.onclick,2000);

//当鼠标移动到图片上时，清除定时器，鼠标从图片上移开时重新设置定时器

outerWrapper.οnmοuseenter=()=>clearInterval(timer);

outerWrapper.οnmοuseleave=()=>timer=setInterval(slideLeft.onclick,2000);

如果想要源代码可以点击这里

里面有两个demo，index直接用的js函数，index_js是封装了在一个构造函数，每次调用可以直接new 一个对象即可。

后面可能还会有其他的图片轮播方式，尽请期待！