平时我们会在各种网站看见图片轮播的效果，但它具体是如何实现的呢？接下来咱们一起来看看各种图片轮播效果的产生过程吧！
一、图片的无缝滚动
什么是图片的无缝滚动？通俗来讲就是一堆图片一张接着一张往过滑，图片之间没有缝隙产生。这也是最简单的一种轮播方式。
d1中放图片的路径，d4中和d1放置相同的图片是为了使轮播更加的流畅。
二、淡入淡出图片轮播：
每次展示一张图片，其余图片都在当前展示的图片背后，按顺序依次出现。当鼠标进入图片，会出现左右两个箭头，点击箭头可切换图片。图片上的小圆圈，只要鼠标进入就会变色并且切到当前圆圈对应的图片上。
<script>
var time; //接受定时器
var apar=document.getElementsByClassName("a")[0];
var bpar=document.getElementsByClassName("b")[0];
var dianpar=document.getElementsByClassName("dian")[0];
var nowcolor=dianpar.children[0]; //存储当前变色的点元素（初始值）
var btnleft=document.getElementsByClassName("btnleft")[0];
var btnright=document.getElementsByClassName("btnright")[0];
//调整层的位置
for(var i=0;i<apar.children.length;i++){
apar.children[i].style.zIndex=apar.children.length-i-1;
}
function countAnimate(num){
for(var k=0;k<num;k++){
for(var i=0;i<apar.children.length;i++){
var index=apar.children[i].style.zIndex;
index++;
if(index==apar.children.length){
index=0;
apar.children[i].className="imgop";
dianpar.children[i].className="";
}
if(index==apar.children.length-1){
apar.children[i].className="imgopshow";
dianpar.children[i].className="dbg"; //当前元素变色
nowcolor=dianpar.children[i]; //存储当前已经变色的这个元素
}
apar.children[i].style.zIndex = index;
}
}
}
timerun();
function timerun(){
time=setInterval(function(){
countAnimate(1);
},2000)
}
bpar.onmouseenter=function(){
clearInterval(time);
}
bpar.onmouseleave=function(){
timerun();
}
for(var i=0;i<dianpar.children.length;i++){
dianpar.children[i].index=i;
dianpar.children[i].onmouseenter=function(){
nowcolor.className=""; //把类名称清掉
this.className="dbg";
var num=0
if(this.index-nowcolor.index>0){
num=this.index-nowcolor.index;
}
else{
num=dianpar.children.length-Math.abs(this.index-nowcolor.index);
}
countAnimate(num);
nowcolor=this; //当前用户点击的值作为上一次颜色变化存下来
}
}
// 处理浏览器的默认选择
document.onselectstart=function(){
return false;
}
btnleft.onclick=function(){
countAnimate(7);
}
btnright.onclick=function(){
countAnimate(1);
}
</script>三、立体轮播：
使图片按如下效果依次展现:
// 存储第一个点的相关样式属性
dianchild[0].style.backgroundColor="black";
var time;
var windowblur=true;
ImageSlider();
function ImageSlider(){
time=setInterval(function(){
imageAnimate("left",0);
},1500);
}
function imageAnimate(direction,cindex){
var firstimg={
left:window.getComputedStyle(divpar[cindex]).left,
top:window.getComputedStyle(divpar[cindex]).top,
zIndex:window.getComputedStyle(divpar[cindex]).zIndex,
backcolor:window.getComputedStyle(dianchild[cindex]).backgroundColor
};
if(direction=="left"){
for(var i=0;i<divpar.length;i++){
if(i==divpar.length-1){
divpar[i].style.left=firstimg.left;
divpar[i].style.top=firstimg.top;
divpar[i].style.zIndex=firstimg.zIndex;
dianchild[i].style.backgroundColor=firstimg.backcolor;
}
else{
divpar[i].style.left=window.getComputedStyle(divpar[i+1]).left;
divpar[i].style.top=window.getComputedStyle(divpar[i+1]).top;
divpar[i].style.zIndex=window.getComputedStyle(divpar[i+1]).zIndex;
dianchild[i].style.backgroundColor=window.getComputedStyle(dianchild[i+1]).backgroundColor;
}
}
}
else{
for(var i=divpar.length-1;i>=0;i--){
if(i==0){
divpar[i].style.left=firstimg.left;
divpar[i].style.top=firstimg.top;
divpar[i].style.zIndex=firstimg.zIndex;
dianchild[i].style.backgroundColor=firstimg.backcolor;
}
else{
divpar[i].style.left=window.getComputedStyle(divpar[i-1]).left;
divpar[i].style.top=window.getComputedStyle(divpar[i-1]).top;
divpar[i].style.zIndex=window.getComputedStyle(divpar[i-1]).zIndex;
dianchild[i].style.backgroundColor=window.getComputedStyle(dianchild[i-1]).backgroundColor;
}
}
}
firstimg=null;
}
document.onselectstart=function(){
return false;
};
var block=document.getElementsByClassName("block")[0];
var btn=document.getElementsByClassName("btn")[0];
block.onmouseenter= function () {
clearInterval(time);
for(var i=0;i<btn.children.length;i++){
btn.children[i].className=i==0?"marleft":"marright";
}
};
block.onmouseleave=function(){
if(windowblur){
ImageSlider();
for(var i=0;i<btn.children.length;i++){
btn.children[i].className="";
}
for (var k = 0; k < divpar.length; k++) {
divpar[k].style.transitionDuration = "0.5s";
}
}
};
btn.children[0].onclick=function(e){
if(e.detail == 1){
imageAnimate("left",0);
}
};
btn.children[1].onclick=function(e){
if(e.detail == 1){
imageAnimate("right",divpar.length-1)
}
};
//底下点点的事件
for(var i=0;i<dianchild.length;i++){
dianchild[i].index=i;
dianchild[i].onclick=function(){
// 修改图片的过渡时间加快动画的进程 防止多张同时动
for (var k = 0; k < divpar.length; k++) {
divpar[k].style.transitionDuration = "0.1s";
}
//获取之前黑色点的索引，写rgb值时注意有空格的问题（格式必须保持统一，不能写black)
var oldindex=0;
for(var k=0;k<dianchild.length;k++){
if(dianchild[k].style.backgroundColor=='rgb(0, 0, 0)'){
oldindex=dianchild[k].index;
}
}
var num=0; //用来判断一共转多少次
/*如果当前索引大于之前索引 从left到right转 ("right",5)
如果当前索引小于之前索引 从right到left转 (left,0)*/
if(this.index>oldindex){
num=this.index-oldindex;
var timegoright=setInterval(function(){
num--;
if(num<0){
clearInterval(timegoright)
}
else{
imageAnimate("right",divpar.length-1);
}
},100)
}
else{
num=Math.abs(this.index-oldindex);
var timegoleft=setInterval(function(){
num--;
if(num<0){
clearInterval(timegoleft)
}
else{
imageAnimate("left",0);
}
},100)
}
}
}
document.addEventListener("visibilitychange",function(){
if(document["hidden"]){
clearInterval(time);
}
else{
ImageSlider();
}
})这里最后用到的这个方法是用来处理直接用AIt+Tab键切出轮播页面进入其他页面时计时器不停止的问题。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
