摘要:本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
1、需求
需要用简单动画的形式将一组图片进行展示,图片数量不固定
2、效果如下:
3、思路
说到动画,首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧,然后根据图片数量计算每个图片的左边距,这样就可以依次排列了。然后就是设置图片所在div的padding值,是图片看起来有层次感。
点击"下一张"的时候,所有图片左边距增加固定单位左边距,根据图片的索引找到中间的图片,使其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<len;i++){
var src=‘img/a‘+(i+1)+".png";
var num=a*i;
html+=‘<div name=‘+i+‘ style="margin-left:‘+num+‘px;padding:‘+(3*len-i*2)+‘px" class="wsc-img-div"><img height="100%" width="100%" src="‘+src+‘"></div>‘;
}
$(".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 imgs=document.getElementById("imgsPanel");
for(var i=0;i<imgs.childNodes.length;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知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号