php+jQuery+html+css+ajax实现按照字母显示图片,按分组显示图片

主要实现功能:

php+jquery点击首字母刷选图片
付费玩家可以看到点击(what’s new 按钮)之日起前一个月的所有怪物图片和信息,普通玩家可以看到点击(what’s new 按钮)之日起前一个月的除了本月的所有怪物。
后来改成:是点击所有按钮都按照付费和普通玩家区分。
家族图片小图片滚动展示;
后面做了功能追加: 点击第一张图片的时候,如果前面有图片则显示前面一张,点击显示中的最后一张图片的时候,这张图片前进一步,后面的图片(如果有的话)显示出来。
点击家族小图片,下面显示家族大图片;
击家族大图片显示家族成员功能。

项目地址(如果不是下图的模样说明还在测试阶段,等待下个版本放出!):http://www.cityofsteam.com/cityosweb/default.php/bestiary

看图:

按家族

按怪物

一些代码:
//点击蓝色家族按钮的时候执行
[code lang=”js”]
function blue_dian(){//点击蓝色家族按钮的时候执行
jQuery(‘.red_this’).hide();
jQuery(‘.blue_this,.species_kongzhi’).show();
jQuery("#gw_content").html("");
jQuery.post("/cityosweb/default.php/shanmao/gwquery",{data:"species"},function(data){
if(data.status==1){
jQuery.each(data.data,function(index,val){
str ='<div class="jzpic" jzid="’+val.id+’"><img src="/cityosweb/upload/wpindexgw/’+val.speciespic+’" /></div>’;
//str2 = ‘<div class="gwli"><img src="/cityosweb/upload/wpindexgw/’+val.speciespic+’" /></div>’;
jQuery("#gw_content").append(str);
//jQuery(".gwul").html("").append(str2);
});
}else{
errorinfo()
}
},"json")
}

function errorinfo(){//没有返回结果则随机输出错误提示。
dtshow = Math.floor(Math.random()*6);
switch(dtshow)
{
case 0:
var str='<div class="bestiary-list error">Currently no entries under this section. Check again in the future!</div>’;
jQuery("#gw_content").append(str);
break;
case 1:
var str='<div class="bestiary-list error">Sorry! There are no entries for this letter yet.</div>’;
jQuery("#gw_content").append(str);
break;
case 2:
var str='<div class="bestiary-list error">The beast you are looking for is in another dungeon. (Or just not written up yet, we\’ll get to it shortly!)</div>’;
jQuery("#gw_content").append(str);
break;
case 3:
var str='<div class="bestiary-list error">Whoops, we don\’t have any entries in this section! Check again later!’;
jQuery("#gw_content").append(str);
break;
case 4:
var str='<div class="bestiary-list error">There is a page missing for this chapter… (We\’ll have it written up soon!)’;
jQuery("#gw_content").append(str);
break;
case 5:
var str='<div class="bestiary-list error">You find… a blank page! No, it\’s not a monster. We just haven\’t written one up for this’;
jQuery("#gw_content").append(str);
break;
}
}
[/code]

//点击家族大图片显示家族成员。

[code lang=”js”]
jQuery("#gw_content .jzpic").live("click",function(){//点击家族大图片显示家族成员。
var jzid = jQuery(this).attr("jzid");
jQuery("#gw_content").html("");
jQuery.post("__APP__/Shanmao/jz_to_gwlist",{jzid:jzid},function(data){
if(data.status==1){
jQuery.each(data.data,function(index,val){
//alert(val.gwname);
var str = ""
str = ‘<div class="bestiary-list"><div class="bestiary-list-left-pic"><img src="/cityosweb/upload/wpindexgw/’+val.gwpic+’" /></div><div class="bestiary-list-right-text"><div class="bestiary-list-title mjzt">’+val.gwname+'</div><div class="bestiary-list-content">’+val.gwdisc+'</div></div></div>’;
jQuery("#gw_content").append(str);
})
}else{
errorinfo()
}
},"json");
});
[/code]

点击各种按钮显示的后台php代码。
[code lang=”php”]
function wgforuser($zm){
$b = M(‘Wpindexgw’);
if($zm=="new"){//点击 what’s new 按钮
$list1 = $b->where("gwstatus=1 and UNIX_TIMESTAMP(time)>UNIX_TIMESTAMP()-86400*30")->order("time desc")->select();//查询
}
if($zm == "bestiary"){//点击按怪物按钮
$list1 = $b->where("gwstatus=1")->order("time desc")->limit(20)->select();//查询
}
if($zm == "species"){//点击家族按钮
$list1= $b->where("gwstatus=1 and species=1")->order("time desc")->limit(20)->select();;
}
if($list1){//输出
$check = $this->payuser();
if($check){//付费
$this->ajaxReturn($list1,’success_pay’,1);
}else{//普通
foreach ($list1 as $key => $val){//本月的数据不显示
$ttime = strtotime($val[‘time’]);
if(date("m",$ttime)==date("m",time())){//本月的数据不显示
unset($list1[$key]);
}
}
$this->ajaxReturn($list1,’success’,1);
}
}else{
$this->error("Bestiary not found.");
}

}
[/code]