仅供学习使用。感觉还可以完善，有更好的欢迎留言。
效果图：
js代码片段如下，
[code lang=”js”]
var gwla = jQuery(".gwla");
var hcdiv = jQuery("#gwcatch");
var gw = gwla.length;
jQuery(".gwbottom ul li.prv").click(function(){
var hc = hcdiv.data("hcla");
if(hc){
gwla.hide().eq(hc).show();
hcdiv.data("hcla",hc-1);
}else if(hc==0){
gwla.hide().eq(0).show();
hcdiv.data("hcla",gw-1);
}else{
gwla.hide().eq(gw-1).show();
hcdiv.data("hcla",gw-2);
}
});
jQuery(".gwbottom ul li.next").click(function(){
var hc = hcdiv.data("hcla");
if(hc){
if(hc<gw){
gwla.hide().eq(hc).show();
hcdiv.data("hcla",hc+1);
}else{
gwla.hide().eq(0).show();
hcdiv.data("hcla",0);
}
}else{
gwla.hide().eq(1).show();
hcdiv.data("hcla",2);
}
});
jQuery(".gwbottom ul li.sj").click(function(){
var sj = Math.floor(Math.random()*gw);
gwla.hide().eq(sj).show();
hcdiv.data("hcla",sj-1);
//alert(hc);
});
[/code]
html:
[code lang=”html”]
<div class="inex_2 guaiwu">
<div class="gwla" style="display:block">
<div class="gwmain"><img src="/wp-content/themes/cityofsteamwpnew/images/Ghoul.png" alt="Ghoul" style="margin-top:20px;"/></div><div class="gwright">
<div class="gwtit">Ghoul</div>
<div class="gwcon">
Ghouls are unique among the undead in that they are made from living flesh that simply refuses to die. While chems can heal wounds, increase strength, and sharpen reaction time, they carry significant risk of addiction. The most heavily dosed adventurers find that they can function without sleep or food, and seek ever-greater challenges in the ancient catacombs of the Mechanism. Then something changes, leaving behind a creature of instinct and rage powered by automatic chem infusers.
</div>
</div>
<div class="cl"></div>
</div>
<div class="gwla">
<div class="gwmain"><img src="/wp-content/themes/cityofsteamwpnew/images/Skeletons.png" alt="Skeletons" style="margin-top:117px;"/></div><div class="gwright">
<div class="gwtit">Skeletons</div>
<div class="gwcon">
Most undead creatures on the Mechanism are made of dead flesh and bone, given life or the appearance thereof by a variety of techniques. Far and away the most common of these abominations are skeletons, which typically run on a combination of steam power and an infusion of necromantic energy. Most skeletons can do little more than sense intruders and hack them to death with a sword or axe. Many a would-be dark lord has fallen victim to his newly reanimated servants.
</div>
</div>
<div class="cl"></div>
</div>
<div class="gwla">
<div class="gwmain"><img src="/wp-content/themes/cityofsteamwpnew/images/Skeletal_Gunner.png" alt="Skeletal Gunner"/></div><div class="gwright">
<div class="gwtit">Skeletal Gunner</div>
<div class="gwcon">Far more difficult to construct than their simpler cousins, Skeletal Gunners require high-grade osseum and a sophisticated power source to give them a chance to aim, fire, and reload with any accuracy. Particularly vengeful victors have been known to guard the tombs of their war dead with the remains of their opponents.
</div>
</div>
<div class="cl"></div>
</div>
<div class="gwla">
<div class="gwmain"><img src="/wp-content/themes/cityofsteamwpnew/images/Skeleton_King.png" alt="Skeleton King"/></div><div class="gwright">
<div class="gwtit">Skeleton King</div>
<div class="gwcon">The most dangerous skeletal warriors are prepared immediately after death, occasionally from willing participants that wish to serve their dark masters beyond the grave. Armed with weapons crackling with energies too dangerous for mortals to wield, Skeleton Kings represent the pinnacle of ossific engineering. Whoever they were in life, they are the bane of all adventurers in death.
</div>
</div>
<div class="cl"></div>
</div>
<div id="gwcatch"></div>
<div class="gwbottom">
<ul>
<li class="prv"><img src="/wp-content/themes/cityofsteamwpnew/images/gwprv.png" align="absmiddle" style="margin-right:10px;">Previous</li>
<li class="sj">Random</li>
<li class="next">Next<img src="/wp-content/themes/cityofsteamwpnew/images/gwnext.png" align="absmiddle" style="margin-left:10px;"></li>
</ul>
</div>
</div>
[/code]
下面是8月21日改善的js(之前的js一直有点问题。。不是很顺畅，还会出现空的。)：
[code lang=”js”]
var gwla = jQuery(".gwla");
var hcdiv = jQuery("#gwcatch");
var gw = gwla.length;
hcdiv.data("hcla",0); //初始化
jQuery(".gwbottom ul li.prv").hover(function(){
jQuery(this).find("img").attr("src","/wp-content/themes/cityofsteamwpnew/images/gwprvh.png");
},function(){
jQuery(this).find("img").attr("src","/wp-content/themes/cityofsteamwpnew/images/gwprv.png");
});
jQuery(".gwbottom ul li.next").hover(function(){
jQuery(this).find("img").attr("src","/wp-content/themes/cityofsteamwpnew/images/gwnexth.png");
},function(){
jQuery(this).find("img").attr("src","/wp-content/themes/cityofsteamwpnew/images/gwnext.png");
});
jQuery(".gwbottom ul li.prv").click(function(){
var hc = hcdiv.data("hcla");
if(hc!=undefined && hc==0){//如果是第一个则到最后一个去。
gwla.hide().eq(gw-1).show();
hcdiv.data("hcla",gw-1);
}else{
gwla.hide().eq(hc-1).show();
hcdiv.data("hcla",hc-1);
}
});
jQuery(".gwbottom ul li.next").click(function(){
var hc = hcdiv.data("hcla");
if(hc!=undefined && hc==gw-1){//如果是最后一个则到第一个去。这个gw在最开始定义的时候就应该-1
gwla.hide().eq(0).show();
hcdiv.data("hcla",0);
}else{
gwla.hide().eq(hc+1).show();
hcdiv.data("hcla",hc+1);
}
});
jQuery(".gwbottom ul li.sj").click(function(){
var sj = Math.floor(Math.random()*gw);
gwla.hide().eq(sj).show();
// hcdiv.data("hcla",sj+1);//随机的时候不要写入缓存，不然上一个下一个又混乱了。
//alert(hc);
});
[/code]