灵活轮播图(append 、clone小解)

当我们前后端交互的时候,我们写的轮播图要灵活一点。当我们写滑动形式的轮播图时,最后面往往要加上若干个代码块和前几个相同,以此达到轮播图最后一张到第一张的过渡。
以这个为例
在这里插入图片描述
这是6个图片,但是我们要最后再加上4个已完成过渡
在这里插入图片描述
以往像这种我会直接在html里面写10个
在这里插入图片描述
但是前后端交互的时候,a标签的数量都时后端遍历传过来的。所以最后四个我们应该用js来解决。
这时候我们就会想到js中的appendChild或者jQuery中的append方法,但是如果我们直接这样添加的话,只会把前四个转移到最后四个的位置,只是调换了位置,并没有实现了添加的效果。

$(".carousel_box>a").eq(3).appendTo($(".carousel_box"))

这时候我们应该用js先复制一下a代码块,再添加
js:

	var a=document.getElementsByClassName("carousel_box")[0];
	var c=a.getElementsByTagName("a")[3];
	var e=c.cloneNode(true);
	a.appendChild(e);

jQuery:

$(".carousel_bo
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值