轮播图新思路

最新推荐文章于 2024-09-15 00:30:13 发布

lJkkkkkk_9586

最新推荐文章于 2024-09-15 00:30:13 发布

阅读量145

点赞数

文章标签：轮播图前端

本文链接：https://blog.csdn.net/lJkkkkkk_9586/article/details/85703767

版权

思路：当第一张图轮播过去后，使这张图追加到当前最后一张图之后，因这张图的margin-left发生了变化，所有在追加之前需重置它的margin-left值为0px，这样每次轮播之后第一张图都会自动追加到最后一张图之后，最后实现图片轮播。

js代码：
    $(function(){
		t=setInterval("on()",1);
	});
	var t;	//轮播定时器
	var mL=0;//当前第一张图的margin-left
	function on(){
		clearTimeout(q);
		var liF= $(".pics li:first");//pics是ul的class名称
		var li = $(".pics li:eq(1)");
		liF.css("margin-left",mL+"px");
		mL-=10;
		if(liF.css("margin-left")=="-300px"){//当轮播到每张图片时停顿
			clearInterval(t);
			var q = setTimeout(function(){
				t=setInterval("on()",1);
			},1000);				
			mL=0; //重置margin-left
			liF.css("margin-left",mL+"px");
			$(".pics:last").append(liF);//追加至当前最后一张图之后
	}
};