jquery圆角头像图片堆叠切换

所属分类: 网页特效-图片特效&上传    2024-10-14 02:36:39

jquery圆角头像图片堆叠切换 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery圆角头像图片堆叠切换(共8个文件)

    • index.html

使用方法

		$(function(){
			$('.start').click(function (){
				timeInt()
			})
			$('.end').click(function (){
				clearInterval(timer)
				timer = null
			})
			let len = $('.round').length;
			for(let i = 0;i<len;i++){
				$('.round').eq(i).css('z-index',len - i)
			}
			
			// 修改此仍需改默认样式 否则默认显示和动画不匹配
			const obj = {
				width:100,//宽度
				time:2000,//毫秒
				num:3,//展示几个
				interval:20,
			}
			
			var timer;
			function timeInt(){
				timer = setInterval(() => {
					// $('.round').eq(0).css('opacity',1);
					let len = $('.round').length;
					for(let i = 0;i<len;i++){
						let num = i * obj.interval + obj.width;
						if(i== 0){//第一个
							$('.round').eq(i).css('left',obj.width + 'px').css('opacity',1);
						}else if(i == len - 1){//最后一个
							$('.round').eq(i).css('left',num+'px').css('opacity',0);
						}else if(i > obj.num){
							$('.round').eq(i).css('left',num+'px').css('opacity',0);
						}else{
							$('.round').eq(i).css('left',num+'px');
						}
					}
					var txt = document.getElementsByClassName('round')[len - 1];
					setTimeout(() => {
						$('.box').prepend(txt);
						for(let i = 0;i<len;i++){
							$('.round').eq(i).css('z-index',len - i)
						}
						$('.round').eq(0).css('left',0)
					},500)
				},obj.time)
			}
		})

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 图片特效&上传

jquery支持触摸滑动图片集3D环绕旋转特效插件

一款超酷的触摸式照片转盘,沿着3D环绕旋转一组图片集,滚动时带妙的视差效果。
  图片特效&上传
 1481  0

jquery包含50多种图片轮播特效集合插件

SudoSlider是一个通用的图片滑块插件,包含了超过50种图片切换动画特效,非常的酷。
  图片特效&上传
 7272  0

jquery响应式产品列表图片左右滚动特效代码

一款可自动循环滚动切换的幻灯片插件,自动无限循环左右滚动、鼠标悬停即刻停止、每次滚动只切换显示一个产品。
  图片特效&上传
 2326  0

jquery网页图片放大镜特效

一款图片放大镜插件,支持自定义设置放大倍数、位置、位移等参数。
  图片特效&上传
 671  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论