jquery动态添加数据，实现“推荐产品模块”功能

第一：html页面

               <div id="foot">
			<div class="global_module foot">
				<h3>热门推荐<img id="goRight" src="images/right.png" /><img id="goLeft" src="images/left.png" /></h3>
				<div id="footDiv">
				<div class="prolist_content">
					<ul id="foot_content">
						
					</ul>
				</div>
				</div>
			</div>
		</div>

点击右上角，实现产品左右切换查看

第二：css样式

#foot .global_module h3{
	width:1180px;
}

#foot #footDiv{
	position:relative;
	display: inline-block;
	overflow:hidden;
	margin-left:15px;
	height:370px;
	width:1170px;
}

#footDiv .prolist_content{
	position:absolute;
	width:9000px;
}
#foot .prolist_content ul li{
	float: left;
}
#foot{
	margin-top:20px;
}

第三：js文件

1.动态添加数据

	
	//mian页面下方产品推荐滚动栏模块
	
	var footlist="";
	$.ajax({
		type:"GET",
		url:"json/hotStyle.txt",
		dataType:"JSON",
		success:function(data){
			$.each(data,function(i,n){
				footlist+="<li><a href='"+n["href"]+"'><img src='"+n["src"]+"'/></a><br/><span class='"
					+n["nameClass"]+"'><a href='"+n["href"]+"'>"+n["optionValue"]+"</a></span><br/><span>$<em>"
					+n["price"]+"</em></span><span class='"+n["addressClass"]+"'>"+n["addressText"]+"</span></li>";
			});
			$("#foot_content").append(footlist);
		}
	});

数据保存在hotStyle.txt中

[
	{
		"href":"detail.html",
		"src":"images/T1.png",
		"nameClass":"Tname",
		"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色",
		"price":"120",
		"addressClass":"address",
		"addressText":"广东  广州"
	},
	{
		"href":"detail.html",
		"src":"images/T1.png",
		"nameClass":"Tname",
		"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色1",
		"price":"130",
		"addressClass":"address",
		"addressText":"广东  广州"
	},
	{
		"href":"detail.html",
		"src":"images/T1.png",
		"nameClass":"Tname",
		"optionValue":"高支棉衬衫蓝色高支棉衬衫蓝色高支棉衬衫蓝色2",
		"price":"140",
		"addressClass":"address",
		"addressText":"广东  广州"
	}
]

需要更多的数据，添加则可

2.左右切换按钮

//foot产品滚动
$(function(){
	var page=1;
	var i=6;
	var len=$('#foot_content li').length;/*获取li元素的个数*/
	var page_count=Math.ceil(len/i);/*Matgh.ceil()小数位全部向整数进一位*/
	var frame_width=$('#footDiv').width();/*获取框架的宽度*/
	var $parent=$('#footDiv .prolist_content');/*获取要滚动的整个div*/
	$('#goLeft').click(function(){
		var len=$('#foot_content li').length;/*获取li元素的个数*/
		var page_count=Math.ceil(len/i);/*Matgh.ceil()小数位全部向整数进一位*/
		var frame_width=$('#footDiv').width();/*获取框架的宽度*/
		var $parent=$('#footDiv .prolist_content');/*获取要滚动的整个div*/
		if(!$parent.is(':animated')){
			if(page==page_count){
				$parent.animate({left:0},80);
				page=1;
			}else{
				$parent.animate({left:'-='+(frame_width)},80);
				page++;
			}
		}
	});
	$('#goRight').click(function(){
		var len=$('#foot_content li').length;/*获取li元素的个数*/
		var page_count=Math.ceil(len/i);/*Matgh.ceil()小数位全部向整数进一位*/
		var frame_width=$('#footDiv').width();/*获取框架的宽度*/
		var $parent=$('#footDiv .prolist_content');/*获取要滚动的整个div*/
		if(!$parent.is(':animated')){
			if(page==1){
				$parent.animate({left:'-='+frame_width*(page_count-1)},80);
				page=page_count;
			}else{
				$parent.animate({left:'+='+frame_width},80);
				page--;
			}
		}
	});
});