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--;
}
}
});
});