以下是 新闻网站jQuery图集相册代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="#www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>�����Ż���վͼ�����JS����</title>
<link href="css/picture.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body style="background:#101010;">
<div class="pic-head">
<div class="picHeard-title">
<span class="spanleftpic l"><a href="#www.caidianqu.com/">�̵���</a><label>></label><a href="/">�㳵��Ů</a><label>></label>��ɫ����µĻ�ɫ��������</span><a href="/">��ɫ����µĻ�ɫ���������Ը���Ů��ҹĻ�ջ�</a><font>��<i id="viewNum">1</i>/10��</font><span class="spanrightpic r"><a href="/">�����㳵��Ů��ҳ</a></span>
</div>
</div>
<div class="indexBody">
<div class="btn-float"><a class="maxBtn-l" href="javascript:void(0);"></a><a class="maxBtn-r" href="javascript:void(0);"></a></div>
<div class="indexbody-main">
<div class="indexbody-left"></div>
<div class="indexbody-right"></div>
</div>
<div class="demo w990">
<div class="maxPic-box">
<div class="maxPic">
<div class="maxPicBox"><span></span><img id="mainPic" src="images/bigPic/1.jpg"/></div>
</div>
</div>
<div class="Pic-pageln">
<span class="l">���á�<font>��</font>����<font>��</font>����������ٷ�ҳ</span>
<span class="pic-r-span r">
<a href="javascript:void(0);" class="ico01" id="stop-on"><i class="ins1"></i>����ͣ</a>
<a id="showOriginal" target="_blank" href="images/bigPic/1.jpg" class="ico02"><i></i>�鿴ԭͼ</a>
<a href="#www.sucaijiayuan.com" class="ico03"><i></i>����</a><a href="" class="ico04"><i></i>����</a>
<a href="#www.sucaijiayuan.com" class="ico05"><i></i>����ͼ��</a>
</span>
</div>
<div id="tplist" class="w-width clearfix">
<div class="Up-tuzu">
<!--<a class="outpic" href="/" id="prevUrl"><span></span><img src="images/prev.jpg" /></a>
<a class="inpic" href="/">��һ��</a><span class="prevspan"></span>-->
</div>
<div class="bottom-lists l">
<div class="PicBtn-a PicBtn-a-l"><a class="PicBtn-left" href="javascript:void(0);"></a></div>
<div class="minPic l">
<ul class="gallery_demo_unstyled">
<li id="tu_1"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/1.jpg" /></a></li>
<li id="tu_2"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/2.jpg"/></a></li>
<li id="tu_3"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/3.jpg"/></a></li>
<li id="tu_4"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/4.jpg"/></a></li>
<li id="tu_5"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/5.jpg"/></a></li>
<li id="tu_6"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/6.jpg"/></a></li>
<li id="tu_7"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/7.jpg"/></a></li>
<li id="tu_8"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/8.jpg"/></a></li>
<li id="tu_9"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/9.jpg"/></a></li>
<li id="tu_10"><span></span><a href="javascript:void(0);"><img src="images/thumbPic/10.jpg"/></a></li>
</ul>
</div>
<div class="PicBtn-a PicBtn-a-r"><a class="PicBtn-right" href="javascript:void(0);"></a></div>
</div>
<div class="Next-tuzu">
<!--<a class="outpic" href="/" id="nextUrl"><span></span><img src="images/next.jpg"></a>
<a class="inpic" href="/">��һ��</a>
<span class="nextspan"></span>-->
</div>
</div>
</div>
</div>
<div class="bottom-footer">
<div class="bfooteroDiv w990">
<p class="bf-p">�����ϲ����</p>
<div class="bfooteroDiv-img">
<ul>
<li>
<div class="bf-oDiv">
<a target="_blank" href="#www.sucaijiayuan.com"><img alt="��������ģ��Ů�Ը�д��" src="images/bottom.jpg" /></a><span></span><a href="/" class="bf-alink">��������ģ��Ů�Ը�д��</a>
</div>
</li>
<li>
<div class="bf-oDiv">
<a target="_blank" href="#www.sucaijiayuan.com"><img alt="��������ģ��Ů�Ը�д��" src="images/bottom.jpg" /></a><span></span><a href="/" class="bf-alink">��������ģ��Ů�Ը�д��</a>
</div>
</li>
<li>
<div class="bf-oDiv">
<a target="_blank" href="#www.sucaijiayuan.com"><img alt="��������ģ��Ů�Ը�д��" src="images/bottom.jpg" /></a><span></span><a href="/" class="bf-alink">��������ģ��Ů�Ը�д��</a>
</div>
</li>
<li>
<div class="bf-oDiv">
<a target="_blank" href="#www.sucaijiayuan.com"><img alt="��������ģ��Ů�Ը�д��" src="images/bottom.jpg" /></a><span></span><a href="/" class="bf-alink">��������ģ��Ů�Ը�д��</a>
</div>
</li>
<li>
<div class="bf-oDiv">
<a target="_blank" href="#www.sucaijiayuan.com"><img alt="��������ģ��Ů�Ը�д��" src="images/bottom.jpg" /></a><span></span><a href="/" class="bf-alink">��������ģ��Ů�Ը�д��</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var prevDiv = $(".Up-tuzu");
var nextDiv = $(".Next-tuzu");
if(prevDiv.find("a").length<1){
prevDiv.html("<p style='line-height:120px;color:#666;'><a href='' id='prevUrl'>û����</a></p>");
}
if(nextDiv.find("a").length<1){
nextDiv.html("<p style='line-height:120px;color:#666;'><a href='' id='nextUrl'>û����</a></p>");
}
});
var selectKey = "1";
var picList = [{
"picPos": 1,
"pid": "1540637",
"bigPic": "images/bigPic/1.jpg",
"bigPic": "images/bigpic/1.jpg",
"thumbPic": "images/thumbPic/1.jpg"
},
{
"picPos": 2,
"pid": "1520876",
"bigPic": "images/bigPic/2.jpg",
"bigPic": "images/bigPic/2.jpg",
"thumbPic": "images/thumbPic/2.jpg"
},
{
"picPos": 3,
"pid": "1520550",
"bigPic": "images/bigPic/3.jpg",
"bigPic": "images/bigPic/3.jpg",
"thumbPic": "images/thumbPic/3.jpg"
},
{
"picPos": 4,
"pid": "1520549",
"bigPic": "images/bigPic/4.jpg",
"bigPic": "images/bigPic/4.jpg",
"thumbPic": "images/thumbPic/4.jpg"
},
{
"picPos": 5,
"pid": "1520548",
"bigPic": "images/bigPic/5.jpg",
"bigPic": "images/bigPic/5.jpg",
"thumbPic": "images/thumbPic/5.jpg"
},
{
"picPos": 6,
"pid": "1520547",
"bigPic": "images/bigPic/6.jpg",
"bigPic": "images/bigPic/6.jpg",
"thumbPic": "images/thumbPic/6.jpg"
},
{
"picPos": 7,
"pid": "1520546",
"bigPic": "images/bigPic/7.jpg",
"bigPic": "images/bigPic/7.jpg",
"thumbPic": "images/thumbPic/7.jpg"
},
{
"picPos": 8,
"pid": "1520545",
"bigPic": "images/bigPic/8.jpg",
"bigPic": "images/bigPic/8.jpg",
"thumbPic": "images/thumbPic/8.jpg"
},
{
"picPos": 9,
"pid": "1520544",
"bigPic": "images/bigPic/9.jpg",
"bigPic": "images/bigPic/9.jpg",
"thumbPic": "images/thumbPic/9.jpg"
},
{
"picPos": 10,
"pid": "1520543",
"bigPic": "images/bigPic/10.jpg",
"bigPic": "images/bigPic/10.jpg",
"thumbPic": "images/thumbPic/10.jpg"
}];
</script>
<script type="text/javascript" src="js/picture.js"></script>
</body>
</html>JS代码(picture.js):
$(function(){
$(".gallery_demo_unstyled li:first").addClass("actives");
$(".gallery_demo_unstyled").children("li").each(function(a){
$(this).bind("click",function(){
controlPicture.changePic(1,(a + 1))}
)}
);
$(".maxBtn-l").click(function(){
controlPicture.changePic(0)}
);
$(".maxBtn-r").click(function(){
controlPicture.changePic(1)}
);
$(".PicBtn-left").click(function(){
controlPicture.changeList(0)}
);
$(".PicBtn-right").click(function(){
controlPicture.changeList(1)}
);
$(".pic-r-span").children("a").each(function(a){
$(this).hover(function(){
if ("stop-on" == $(this).attr("id")){
if ("" == $(this).children("i").attr("class")){
$(this).children("i").attr("class","ins")}
else{
$(this).children("i").attr("class","ins1")}
}
else{
var b = $(this).attr("class");
$(this).children("i").attr("class","ins" + (b.substr(b.length - 1,1)))}
}
,function(){
if ("stop-on" == $(this).attr("id")){
if ("ins" == $(this).children("i").attr("class")){
$(this).children("i").attr("class","")}
else{
$(this).children("i").attr("class","plays")}
}
else{
$(this).children("i").attr("class","")}
}
)}
);
$("#stop-on").live("click",function(){
if ("ins" == $(this).children("i").attr("class")){
$(this).html('<i class="ins1"></i>����ͣ');
controlPicture.stopAutoPlay()}
else{
$(this).html('<i class="ins"></i>�Զ�������');
controlPicture.autoPlay()}
}
);
$(".indexbody-left").click(function(){
controlPicture.changePic(0)}
);
$(".indexbody-right").click(function(){
controlPicture.changePic(1)}
)}
);
function calcPicHover(){
$(".indexbody-right").mousemove(function(){
$(this).css("cursor","url(images/next.cur),auto");
$(this).attr("title","�����һ�� ֧�ּ����ҡ���ҳ")}
);
$(".indexbody-left").mousemove(function(){
$(this).css("cursor","url(images/pre.cur),auto");
$(this).attr("title","�����һ�� ֧�ּ��������ҳ")}
)}
var changeSt = false;
function getScrollTop(){
if (!changeSt){
document.documentElement.scrollTop = 40;
changeSt = true}
}
var controlPicture ={
getPage:1,curPic:selectKey,moveTimer:"",loadAllThumb:false,playTime:10000,playState:true,isPlaying:false,changeList:function(f,c){
var b = this.getPage;
var d = picList.length;
if (d > 6){
var e = 111;
b = parseInt(b);
if (typeof(c) != "undefined"){
b = parseInt(c);
if (b < 1){
b = 1}
if (b > d - 5){
b = d - 5}
}
else{
if ("1" == f){
b = b + 3;
if (b > (d - 5)){
b = d - 5}
}
else{
b = b - 3;
if (b < 1){
b = 1}
}
}
this.getPage = b;
var a = (b - 1) * e;
$(".gallery_demo_unstyled").animate({
left:-a}
,{
queue:false}
);
if (this.curPic > 5 || b > 3){
this.loadThumbPic()}
}
}
,changePic:function(f,a,c){
this.suspendPlay();
var h = this.curPic;
var e = picList.length;
if (picList){
if (typeof(a) != "undefined"){
h = parseInt(a);
if (h < 1){
h = 1}
if (h > e){
h = e}
}
else{
if ("1" == f){
h = parseInt(h) + 1;
if (h > e){
var b = $("#nextUrl").attr("href");
if ("" != b){
window.location.href = b}
else{
alert("�Ѿ�û���ˣ�");
return false;
}
}
}
else{
h = parseInt(h) - 1;
if (h < 1){
var g = $("#prevUrl").attr("href");
if ("" != g){
window.location.href = g}
else{
alert("�Ѿ�û���ˣ�");
return false;
}
}
}
}
this.checkAndLoadImg(picList[h - 1].bigPic,document.getElementById("mainPic"));
$("#showOriginal").attr("href",picList[h - 1].originalPic);
$(".gallery_demo_unstyled").children("li").each(function(){
$(this).attr("class","")}
);
$("#tu_" + h).attr("class","actives");
this.curPic = h;
this.changeURl(h);
this.preLoad(h);
this.changeList(1,h - 2);
$("#viewNum").html(h);
this.playTime = 6000;
getScrollTop();
this.recoverPlay();
}
}
,preLoad:function(a){
controlPicture.superPreLoadImage(picList,parseInt(a))}
,autoPlay:function(){
var a = this.playTime;
this.isPlaying = true;
this.moveTimer = setTimeout("controlPicture.autoPlay(1);
controlPicture.changePic(1)",a)}
,suspendPlay:function(){
this.playState = this.isPlaying;
this.stopAutoPlay()}
,recoverPlay:function(){
if (this.playState){
this.autoPlay()}
}
,stopAutoPlay:function(){
clearTimeout(this.moveTimer);
this.playTime = 6000;
this.isPlaying = false}
,turnPageOnkeyDown:function(){
$(document).keydown(function(a){
if (a.keyCode == 37){
controlPicture.changePic(0)}
if (a.keyCode == 39){
controlPicture.changePic(1)}
}
)}
,loadThumbPic:function(){
var e = parseInt(this.getPage) - 1 + 6;
var b = parseInt(this.getPage);
var f = 3;
var a = 0;
while (f && typeof picList[b + a - 1] != "undefined"){
if (typeof($("#tu_" + (b + a)).find("img").attr("name")) != "undefined"){
var d = picList[b + a - 1].thumbPic;
if ($("#tu_" + (b + a)).find("img").attr("name") != $("#tu_" + (b + a)).find("img").attr("src")){
controlPicture.checkAndLoadImg(d,document.getElementById("tu_" + (b + a)).getElementsByTagName("img")[0],1)}
var c = new Image();
c.src = d;
a++;
if (!c.complete){
if (b + a > e){
f--}
}
}
else{
a++}
}
}
,checkAndLoadImg:function(e,d,c,a){
var b = new Image();
b.src = e;
var f = c ? "images/grey1.gif":"images/loading2.gif";
if (b.complete){
$(d).css("display","none");
d.src = e;
$(d).fadeIn("normal");
if (!c){
calcPicHover()}
}
else{
d.src = f;
$(b).load(function(){
$(d).css("display","none");
d.src = e;
$(d).fadeIn("normal");
if (!c){
calcPicHover()}
}
)}
return true}
,superPreLoadImage:function(d,c){
var e = 2;
var a = 0;
while (e && typeof d[c + a] != "undefined"){
var b = new Image();
b.src = d[c + a].bigPic;
if (b.complete){
a++}
else{
a++;
e--}
}
}
,selectByurl:function(){
var b = window.location.href;
var a = b.split("#");
if (typeof(a[1]) != "undefined"){
var c = a[1].split("=");
if (typeof(c[1]) != "undefined"){
if (c[1]){
if (c[1] < 1 || c[1] > picList.length){
c[1] = 1}
return c[1]}
}
}
return 0}
,changeURl:function(a){
if (a){
location.hash = "#pn=" + a}
}
}
;
var curPicPos = controlPicture.selectByurl();
if (curPicPos){
selectKey = curPicPos}
if (parseInt(selectKey) > 1){
controlPicture.changePic(1,parseInt(selectKey),1)}
else{
controlPicture.checkAndLoadImg($("#mainPic").attr("src"),document.getElementById("mainPic"));
}
controlPicture.turnPageOnkeyDown();
if (document.getElementById("prevUrl") != null){
controlPicture.checkAndLoadImg($("#prevUrl").children("img").attr("src"),document.getElementById("prevUrl").getElementsByTagName("img")[0],1)}
if (document.getElementById("nextUrl") != null){
controlPicture.checkAndLoadImg($("#nextUrl").children("img").attr("src"),document.getElementById("nextUrl").getElementsByTagName("img")[0],1)}
if (parseInt(selectKey) <= 5){
$(".gallery_demo_unstyled").children("li").each(function(a){
if (a < selectKey + 5){
controlPicture.checkAndLoadImg($(this).find("img").attr("src"),document.getElementById("tu_" + (a + 1)).getElementsByTagName("img")[0],1)}
}
)}
getScrollTop();
$(document).ready(function(){
if (1 == parseInt(selectKey)){
controlPicture.superPreLoadImage(picList,parseInt(selectKey))}
//controlPicture.autoPlay();
}
);
CSS代码(picture.css):
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
body{font:12px/1.5 SimSun,Arial,����,Helvetica,san-serif;color:#333;}
select,input,button{vertical-align:middle;font-size:100%;}
ul,ol{list-style:none;}
fieldset,img{border:0;}
em{font-style:normal;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
/* End hide from IE-mac*/
@charset "gb2312";body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
body{font:12px/1.5 SimSun,Arial,Helvetica,san-serif;color:#333;}
select,input,button{vertical-align:middle;font-size:100%;}
ul,ol{list-style:none;}
fieldset,img{border:0;}
em{font-style:normal;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
/* End hide from IE-mac*/
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.l{float:left;}
.r{float:right;}
.w990{width:990px;margin:0 auto;}
.pic-head{background:#222;height:35px;line-height:35px;border-bottom:1px solid #2b2b2b;color:#666;margin-bottom:10px}
.picHeard-title{text-align:center;color:#999;position:relative;font-size:16px;width:100%;font-family:"Microsoft YaHei"}
.picHeard-title font{color:#999;font-size:16px}
.picHeard-title span{color:#666;position:absolute;top:0;font-family:'simsun';font-size:12px}
.picHeard-title a{color:#666}
.picHeard-title a:hover{color:#999}
.picHeard-title span{font-size:12px}
.picHeard-title span a{color:#666;font-size:12px}
.picHeard-title span label{display:inline-block;margin:0 5px}
.spanleftpic{left:30px}
.spanrightpic{right:30px}
.demo{text-align:center;width:1000px;position:relative;z-index:9}
.bottom-lists{width:739px;text-align:center;overflow:hidden}
.maxPic-box{position:relative}
.maxPic-box a{display:block;position:absolute;z-index:99999999;background:url("../images/maxBtn.png") no-repeat;width:34px;height:52px;top:50%;margin-top:-26px;cursor:pointer}
.maxPic-box a.maxBtn-l{left:30px}
.maxPic-box a.maxBtn-l:hover{background-position:0 -52px;top:50%}
.maxPic-box a.maxBtn-r{right:30px;background-position:-34px 0}
.maxPic-box a.maxBtn-r:hover{background-position:-34px -52px;top:50%}
.minPic{width:659px;height:128px;overflow:hidden;position:relative}
.maxPic{width:800px;margin:0 auto;height:600px}
.maxPicBox{width:800px;height:600px;display:table-cell;vertical-align:middle;margin-left:95px;margin:0 auto}
.maxPic span{width:0;height:100%;display:inline-block;vertical-align:middle}
.maxPic img{display:inline-block;text-align:center;vertical-align:middle}
.gallery_demo_unstyled{width:100000px;position:absolute;left:0}
.gallery_demo_unstyled li{float:left;display:table-cell;vertical-align:middle;text-align:center;width:100px;height:120px;line-height:120px;cursor:pointer;border:2px solid #101010;margin-right:7px}
.gallery_demo_unstyled li span{width:0;height:100%;display:inline-block;vertical-align:middle}
.gallery_demo_unstyled li.actives{border:2px solid #fff}
.gallery_demo_unstyled li img{display:inline-block;text-align:center;vertical-align:middle}
.Up-tuzu,.Next-tuzu{float:left;width:100px;height:120px;border:2px solid #303030;cursor:pointer;position:relative;overflow:hidden}
.Up-tuzu a,.Next-tuzu a{display:block}
.outpic{width:100px;height:120px;display:table-cell;vertical-align:middle;text-align:center}
.outpic span{width:0;height:100%;display:inline-block;vertical-align:middle}
.outpic img{display:inline-block;text-align:center;vertical-align:middle}
.Up-tuzu a.inpic,.Next-tuzu a.inpic{position:absolute;width:100px;text-align:center;left:0;bottom:5px;color:#fff;text-decoration:none;z-index:9}
.Next-tuzu{margin-left:20px}
.Up-tuzu{margin-right:20px}
.PicBtn-a{width:30px;height:124px;float:left}
.PicBtn-a a{background:url("../images/picbtn.png") no-repeat;display:block;width:30px;height:124px}
.PicBtn-a a.PicBtn-right{background-position:-30px 0}
.PicBtn-a-l{margin-right:10px}
.PicBtn-a-r{margin-left:10px}
.w-width2 .minPic{width:659px;height:83px;overflow:hidden;position:relative}
.w-width2 .maxPic{width:800px;margin:0 auto;min-height:600px}
.w-width2 .maxPic img{display:block;margin:0 auto}
.w-width2 .gallery_demo_unstyled{width:100000px;position:absolute;left:0}
.w-width2 .gallery_demo_unstyled li{float:left;display:table-cell;vertical-align:middle;text-align:center;width:100px;height:75px;line-height:75px;cursor:pointer;border:2px solid #101010;margin-right:7px}
.w-width2 .gallery_demo_unstyled li span{width:0;height:100%;display:inline-block;vertical-align:middle}
.w-width2 .gallery_demo_unstyled li.actives{border:2px solid #fff}
.w-width2 .gallery_demo_unstyled li img{display:inline-block;text-align:center;vertical-align:middle}
.w-width2 .Up-tuzu,.w-width2 .Next-tuzu{float:left;width:100px;height:75px;border:2px solid #303030;cursor:pointer;position:relative;overflow:hidden}
.Up-tuzu a,.Next-tuzu a{display:block}
.w-width2 .outpic{width:100px;height:75px;display:table-cell;vertical-align:middle;text-align:center}
.w-width2 .outpic span{width:0;height:100%;display:inline-block;vertical-align:middle}
.w-width2 .outpic img{display:inline-block;text-align:center;vertical-align:middle}
.w-width2 .Up-tuzu a.inpic,.w-width2 .Next-tuzu a.inpic{position:absolute;width:100px;text-align:center;left:0;bottom:5px;color:#fff;z-index:9}
.Next-tuzu{margin-left:20px}
.Up-tuzu{margin-right:20px}
.PicBtn-a{width:30px;height:83px;float:left}
.w-width2 .PicBtn-a a{background:url("../images/picbtn2.png") no-repeat;display:block;width:30px;height:83px}
.PicBtn-a a.PicBtn-right{background-position:-30px 0}
.PicBtn-a-l{margin-right:10px}
.PicBtn-a-r{margin-left:10px}
.Pic-pageln{height:43px;overflow:hidden;width:800px;margin:0 auto}
.Pic-pageln font{color:#fff}
.Pic-pageln span{display:inline-block;height:43px;line-height:43px;color:#666}
.Pic-pageln span a{_padding-top:15px;display:inline-block;margin-left:15px;height:43px;line-height:43px;color:#666}
.pic-r-span a{padding-top:3px}
.pic-r-span a i{vertical-align:middle;display:inline-block;width:15px;height:16px;background:url("../images/pic-ico.png") no-repeat;margin-right:5px}
.pic-r-span a.ico01 i.plays{background-position:-17px -25px}
.pic-r-span a.ico01 i.ins1{background-position:0 -25px}
.pic-r-span a.ico01 i.ins{background-position:0 0}
.pic-r-span a.ico01 i{background-position:-17px 0}
.pic-r-span a.ico02 i{background-position:-17px -49px}
.pic-r-span a.ico02 i:hover,.pic-r-span a.ico02 i.ins2{background-position:0 -49px}
.pic-r-span a.ico03 i{background-position:-17px -73px}
.pic-r-span a.ico03 i:hover,.pic-r-span a.ico03 i.ins3{background-position:0 -73px}
.pic-r-span a.ico04 i{background-position:-17px -100px}
.pic-r-span a.ico04 i:hover,.pic-r-span a.ico04 i.ins4{background-position:0 -100px}
.pic-r-span a.ico05 i{background-position:-17px -116px}
.pic-r-span a.ico05 i:hover,.pic-r-span a.ico05 i.ins5{background-position:0 -116px}
.pic-r-span a:hover{color:#fff}
.bottom-footer{height:224px;border:1px solid #2b2b2b;background:#222;margin-top:20px}
.bf-p{height:52px;line-height:52px;color:#fff;font-size:14px;font-weight:bold}
.bfooteroDiv-img{width:992px;height:137px;overflow:hidden}
.bfooteroDiv-img ul{width:10000px}
.bfooteroDiv-img ul li{border:1px solid #303030;padding:8px;width:164px;float:left;margin-right:20px}
.bfooteroDiv-img ul li img{display:block}
.bf-oDiv{width:162px;height:117px;position:relative;overflow:hidden}
.bf-oDiv span{position:absolute;width:162px;height:26px;left:0;bottom:0;_bottom:-1px;background:#000;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75}
.bf-alink{position:absolute;left:0;bottom:0;_bottom:-2px;overflow:hidden;color:#ccc;line-height:26px;height:26px;padding-left:7px}
.belle2 a.lista-cars,.belle1 a.lista-cars,.carbelle-2 a.lista-cars{background:none repeat scroll 0 0 rgba(0,0,0,0.5);_background:#000;display:inline-block;float:left;font-family:arial;height:20px;line-height:20px;padding:0 10px 0 10px;margin-left:0;bottom:10px;color:#fff}
.belle2-2{position:relative}
.NoneDiv span{width:240px}
.carbelle-1 div.NoneDiv a.lista-cars{position:absolute;margin-top:5px;height:30px;line-height:30px;bottom:0;background:0}
.w-width{margin-left:6px}
#viewNum{font-style:normal}
.prevspan{position:absolute;bottom:0;left:0;z-index:9;left:0;text-align:center;display:block;background:url("../images/bottomimg-zu.png") no-repeat;height:41px;width:112px;z-index:1}
.nextspan{position:absolute;bottom:-10px;left:0;z-index:9;left:0;text-align:center;display:block;background:url("../images/bottomimg-zu.png") no-repeat;height:41px;width:112px;z-index:1}
*html .prevspan{_background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='../images/bottomimg-zu.png') width:112px;height:41px;display:block;position:absolute;z-index:1}
*html .nextspan{_background:0;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src='../images/bottomimg-zu.png') width:112px;height:41px;display:block;position:absolute;z-index:1}
.indexbody-main{position:relative;z-index:99;width:100%;background:red}
.indexbody-left{width:50%;height:600px;position:absolute;left:0;z-index:99;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;background:#000}
.indexbody-right{width:50%;height:600px;position:absolute;right:0;z-index:99;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;background:#000}
.btn-float{width:1000px;margin:0 auto;position:relative;z-index:999}
.btn-float a{display:block;position:absolute;top:300px;z-index:9999;background:url("../images/maxBtn.png") no-repeat;width:34px;height:52px;margin-top:-26px;cursor:pointer}
.btn-float a.maxBtn-l{left:30px}
.btn-float a.maxBtn-l:hover{background-position:0 -52px;top:300px}
.btn-float a.maxBtn-r{right:30px;background-position:-34px 0}
.btn-float a.maxBtn-r:hover{background-position:-34px -52px;top:300px}
分享到QQ
分享到微博
微信扫一扫
