ul使用margin-left实现轮播图

最新推荐文章于 2021-12-26 18:56:56 发布

weixin_33913332

最新推荐文章于 2021-12-26 18:56:56 发布

阅读量649

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/daladida/blog/741164

版权

2019独角兽企业重金招聘Python工程师标准>>>

html代码：

<div class="lunbo_father fl">
    <ul class="center_box">
        <li></li>
        <li></li>
        <li></li>
    </ul>	
</div>

css代码：

.lunbo_father{
	overflow: hidden;
	width: 655px;
	height: 444px;
}
.center_box{
	overflow: hidden;
	width: 100000px;
	height: 444px;
}
.center_box li{
	float: left;
	width: 300px;
	height: 345px;
	padding-top: 99px;
	margin-right: 28px;
	background: url(../images/lunbo1_bg.png) no-repeat;
}

关键是ul的宽度设得贼大，然后外层的div元素宽度刚好是一张或一组图片的宽度，然后都加上overflow:hidden; 最后用margin-left实现轮播

js代码：

/*优质案例轮播图*/
	var ipage = 0;
	var _page_width = $(".lunbo_father").width();
	//alert(typeof _page_width);
	//下一页
	$(".lunbo_right a").each(function(index){
		$(this).on("click",function(e){	
			var _ul = $(this).parent().siblings(".lunbo_father").find("ul.center_box");
			var _page_num = Math.ceil(_ul.find("li").length/2);
			//alert(_page_num);
			if(ipage < _page_num-1){
				ipage++;
				_ul.animate({"margin-left":-_page_width*ipage+"px"});
			}			
		});
	});
	//上一页
	$(".lunbo_left a").each(function(index){
		$(this).on("click",function(e){
			var _ul = $(this).parent().siblings(".lunbo_father").find("ul.center_box");
			var _page_num = Math.ceil(_ul.find("li").length/2);
			if(ipage > 0){
				ipage--;
				_ul.animate({"margin-left":-_page_width*ipage+"px"});
			}			
		});
	});

转载于:https://my.oschina.net/daladida/blog/741164