JS实现炫酷轮播图

2023-07-12 15:19:04 134

varoImg=$('img'); //默认中间展示索引值为0的这张图片 varcurDisplay=0; //将图片分散排列 //获得图片个数 varlen=oImg.length; //定时器 vartimer; functioninit(){ initalCarousel(); bindEvent(); } init(); functioninitalCarousel(){ //获得中间图片 console.log($('img')) varhLen=Math.floor(oImg.length/2); //rNum,lNum分别是分散在中间图片左右左右两侧的图片索引 varrNum,lNum; for(vari=0;ioImg.length-1){ rNum-=oImg.length; } oImg.eq(rNum).css({ transform:'translateX('+(150*(i+1))+'px)translateZ('+(200-i*100)+'px)rotateY(-30deg)' }); oImg.removeClass('active'); } //当前显示图片直接z轴向前移动同时添加class名作为标记 oImg.eq(curDisplay).css({ transform:'translateZ(300px)' }).addClass('active'); } //点击事件 functionbindEvent(){ //在每一张图片上绑定上点击事件 oImg.on('click',function(e){ //判断点击图片不是第一张显示图片 if(!$(this).hasClass('active')){ //标记图片flag切换 //改变当前显示图片索引 curDisplay=$(this).index(); initalCarousel(); } //鼠标覆盖清除自动轮播定时器 }).hover(function(){ clearInterval(timer); //鼠标移走继续轮播 },function(){ play(); }); } //自动播放 functionplay(){ timer=setInterval(function(){ if(curDisplay==len-1){ curDisplay=0; }else{ curDisplay++; } initalCarousel(); },2000); }

*{ margin:0; padding:0; } .wrapper{ position:relative; transform-style:preserve-3d; perspective:800px; /*border:1pxsolidblack;*/ height:200px; margin-top:200px; } .wrapperimg{ position:absolute; left:50%; top:50%; width:300px; height:200px; margin-left:-150px; margin-top:-100px; border-radius:8px; transition:transform0.5sease-in-out; }

JS实现炫酷轮播图

热门推荐

随机推荐