html如何实现图⽚左右滑动效果,HTML+CSS⼊门如何实现图
⽚（image）左右滑动
本篇教程介绍了HTML+CSS⼊门 如何实现图⽚(image) 左右滑动，希望阅读本篇⽂章以后⼤家有所收获，帮助⼤家HTML+CSS⼊门。
<
1、需求
需要⽤简单动画的形式将⼀组图⽚进⾏展⽰，图⽚数量不固定
2、效果如下:
3、思路
说到动画，⾸先想到使⽤-webkit-transition:；因为这个最简单好⽤,⾸先将图⽚都放在左侧，然后根据图⽚数量计算每个图⽚的左边距，这样就可以依次排列了。然后就是设置图⽚所在div的padding值，是图⽚看起来有层次感。html滚动效果代码
点击"下⼀张"的时候，所有图⽚左边距增加固定单位左边距，根据图⽚的索引到中间的图⽚，使其padding保持固定值，z-index保持最⼤值。最后加上div样式的-webkit-transition: all 0.6s属性，使其产⽣图⽚滑动缩放的动画效果。
4、核⼼代码如下：
$(document).ready(function(){
var len=10; //可以调节
var rightnum=1;//图⽚向右滑动的次数
var html="";
var a=230/(len-1);//左边距递增值
for(var i=0;i
var src=‘img/a‘+(i+1)+".png";
var num=a*i;
html+=‘
‘;
}
$(".imgs-panel").html(html);
$(".next-btn").on("click",function(){ //点击显⽰下⼀张
if(rightnum!=len)init(1);
});
$(".previous-btn").on("click",function(){ //点击显⽰上⼀张
if(rightnum!=1) init(-1);
});
function init(val){
rightnum+=val;
var ElementById("imgsPanel");
for(var i=0;i
var img=imgs.childNodes[i];
var index=Number(img.attributes["name"].value)+val; //索引累加
img.attributes["name"].value=index;
img.style.marginLeft=index*a+"px";//等距离累加图⽚的左边距
var num2=Math.abs(len-1-index);
img.style.zIndex=(len-num2); //设置图层的覆盖顺序，中间的始终在最上
if(num2==0)img.style.zIndex=100;
img.style.padding=(3*len-(len-num2)*2)+"px"; //设置图⽚⼤⼩，图⽚由中间向两边减⼩
}
}
});
本⽂由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。