以下是 国美在线首页jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>国美在线首页jQuery焦点图</title>
<link href="css/chinaz.css" rel="stylesheet">
</head>
<body>
<br>
<div class="wbox">
<div class="slide_box clearfix">
<div class="Jslide" id="Jslide">
<div class="slide-list" id="slide-list">
<div class="slide-ul" style="display:block;">
<ul>
<li class="w1" style="display:block;"><a href="#" class="a_0" title="" rel="nofollow" target="_blank"><img src="images/20150721sj1.jpg" big-src="images/20150721sj1.jpg" min-src="images/20150721sj1z.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/01彩电ggg.png" min-src="images/第二帧彩电抄底季放价zhai.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/冰洗gfggf.png" min-src="images/0720冰洗窄g.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/kogntiaoggg.jpg" min-src="images/空调hhhz.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#?17/mdkt717.html?intcmp=sy-C-3-2-1-aks" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/ktggggg.jpg" min-src="images/ktgggggz.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#?dnzj.html?intcmp=sy-C-4-1-1-sj" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/0720电脑g.jpg" min-src="images/0720电脑窄屏g.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#?20150715023906_topics.html?intcmp=sy-C-4-2-1-dn" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/手机改ggggg.jpg" min-src="images/手机窄改.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#?song-chudadiERbo.html?intcmp=sy-C-5-1-1-cx" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/0721厨卫大电.jpg" min-src="images/0721厨卫大电窄.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#?an-dfsk720.html?intcmp=sy-C-5-2-1-cw" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/小家电ffdd.jpg" min-src="images/小家电ffddz.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#?kkqjbsf.html?intcmp=sy-C-6-1-1-jd" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/dajiadian0721k.jpg" min-src="images/dajiadian0721z.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="http://13141618.taobao.com" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/xiaojiadian0721k.jpg" min-src="images/xiaojiadian0721z.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#?sjxly-blyx.html#1?intcmp=sy-C-7-1-1-kx" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/gomecs0722k.jpg" min-src="images/gomecs0722z.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#?fzcsjll.html?intcmp=sy-C-7-2-1-jz" rel="nofollow" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/fuzhuangcheng0722k.jpg" min-src="images/fuzhuangcheng0722z.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="slide-ul">
<ul>
<li class="w1" style="display:block;">
<a href="#?sjhwm2.html?intcmp=sy-C-8-1-1-rs" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/大牌0722.jpg" min-src="images/大牌小0722.jpg" alt="" /></a>
</li>
<li class="w1" style="display:block;">
<a href="#?20140606022741_topics.html?intcmp=sy-C-8-2-1-hr" class="a_0" title="" target="_blank"><img src="images/grey.gif" data-src="1" big-src="images/苹果ggghhh.jpg" min-src="images/0721sj9z苹果z.jpg" alt="" /></a>
</li>
</ul>
</div>
</div>
<ul class="slide-tab" id="slide-tab">
<li class="current" >
<div class="text">
<em></em>
<span>今日头条</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">制冷节</a>
</div>
</li>
<li>
<div class="text">
<em></em>
<span>电视冰洗</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">彩电抄底季放价</a>
<a href="#" hidefocus="true">冰洗钜惠</a>
</div>
</li>
<li>
<div class="text">
<em></em>
<span>空调</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">空调抗暑大战</a>
<a href="#" hidefocus="true">美的空调</a>
</div>
</li>
<li >
<div class="text">
<em></em>
<span>3C数码</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">电脑节</a>
<a href="#" hidefocus="true">手机冰点价</a>
</div>
</li>
<li >
<div class="text">
<em></em>
<span>烟灶小电</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">国美横扫厨卫价</a>
<a href="#" hidefocus="true">小家电满减</a>
</div>
</li>
<li >
<div class="text">
<em></em>
<span>平台家电</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">果粉首发</a>
<a href="#" hidefocus="true">小家电</a>
</div>
</li>
<li >
<div class="text">
<em></em>
<span>生活百货</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">好货8元起</a>
<a href="#" hidefocus="true">服饰大放价</a>
</div>
</li>
<li class="last">
<div class="text">
<em></em>
<span>大牌特惠</span>
<div class="num"></div>
</div>
<div class="item">
<a href="#" hidefocus="true">华为新品</a>
<a href="#" hidefocus="true">Apple手机</a>
</div>
</li>
</ul>
<a href="#" class="dir go_l" id="go_l" hidefocus="true"></a>
<a href="#" class="dir go_r" id="go_r" hidefocus="true"></a>
</div>
</div>
</div>
<script type="text/javascript" src="js/chinaz.js"></script>
</body>
</html>JS代码(chinaz.js):
!function(){
function e(e){
return document.getElementById(e)}
var t={
init:function(t){
this.areaImgLoad([["j-imgload-logo",1],["j-imgload-serives",3],["j-imgload-servicestab",1],["j-imgload-recomm",6]]);
if(document.getElementById("timelimit")){
var i=document.getElementById("timelimit");
i.style.background="url("+i.getAttribute("gome-style")+") no-repeat 0 0";
i.removeAttribute("gome-style")}
var s=this;
if(this.getDiv().length==0||this.getLi().length==0){
return}
if(t){
this.speed=t.speed?t.speed:5e3}
e("slide-list").onmouseover=function(){
clearInterval(s.t)}
;
e("slide-list").onmouseout=function(){
s.animate()}
;
e("Jslide").onmouseover=function(){
e("go_l").style.display="block";
e("go_r").style.display="block"}
;
e("Jslide").onmouseout=function(){
e("go_l").style.display="";
e("go_r").style.display=""}
;
this.screenType();
this.imgLoad(0);
this.defaultStatus();
this.animate();
this.setPos();
this.control();
this.bindEvent()}
,i:0,t:null,speed:5e3,screenType:function(){
var t=this;
var i=t.getByClass("w1",e("slide-list"),"li");
if(t.hasClass(document.body,"w990")){
for(var s=0,a=i.length;
s<a;
s++){
var l=i[s].getElementsByTagName("img");
if(l.length&&l[0].getAttribute("min-src")){
l[0].setAttribute("data-src",l[0].getAttribute("min-src"));
l[0].removeAttribute("big-src");
l[0].removeAttribute("min-src")}
}
}
else{
for(var s=0,a=i.length;
s<a;
s++){
var l=i[s].getElementsByTagName("img");
if(l.length&&l[0].getAttribute("big-src")){
l[0].setAttribute("data-src",l[0].getAttribute("big-src"))}
l[0].removeAttribute("big-src");
l[0].removeAttribute("min-src")}
}
}
,getByClass:function(e,t,i){
var s=new RegExp("\\b"+e+"\\b");
var a=[];
var l=(t||document).getElementsByTagName(i||"*");
for(var n=0;
n<l.length;
n++){
if(s.test(l[n].className)){
a.push(l[n])}
}
return a}
,del:function(e){
if(e.parentNode){
e.parentNode.removeChild(e)}
}
,hasClass:function(e,t){
function i(e,t){
for(var i=0,s=t.length;
i<s;
i++)if(e===t[i])return i;
return-1}
return i(t,(e.className||"").split(/\s+/))>-1}
,getLi:function(){
return e("slide-tab").getElementsByTagName("li")}
,getDiv:function(){
var t=this;
return t.getByClass("slide-ul",e("slide-list"),"div")}
,setPos:function(){
var t=this,i=t.getByClass("item",e("slide-tab"),"div");
for(var s=0,a=i.length;
s<a;
s++){
var l=i[s].getElementsByTagName("a").length*25;
i[s].style.height=l+"px";
i[s].style.top=-l+"px"}
}
,animate:function(e){
var t=this,i=t.getLi(),s=t.getDiv();
clearInterval(t.t);
t.t=setInterval(function(){
t.i++;
if(t.i>=i.length){
t.i=0}
t.imgLoad(t.i);
for(var e=0,a=i.length;
e<a;
e++){
i[e].className="";
if(t.i==e&&t.i!=a-1){
i[e].className="current"}
else if(t.i==a-1){
i[a-1].className="last current"}
else{
i[a-1].className="last"}
}
for(var l=0,n=s.length;
l<n;
l++){
if(t.i==l){
s[l].style.display="block"}
else{
s[l].style.display=""}
}
t.initialState(t.i)}
,t.speed)}
,initialState:function(e){
var t=this,i=t.getLi()[t.i].getElementsByTagName("a"),s=t.getDiv()[t.i].getElementsByTagName("li"),a=t.getByClass("num",t.getLi()[t.i],"div")[0],l=t.getByClass("text",t.getLi()[t.i],"div")[0],n=l.getElementsByTagName("span")[0];
if(i.length>1){
a.innerHTML=1+"/"+i.length}
else{
a.style.display="none";
n.className="no-list"}
for(var r=0,o=i.length;
r<o;
r++){
if(r==0){
i[r].className="cur"}
else{
i[r].className=""}
}
for(var g=0,m=s.length;
g<m;
g++){
if(g==0){
s[g].style.display="block"}
else{
s[g].style.display=""}
}
}
,defaultStatus:function(){
var e=this;
slideLi=e.getLi();
for(var t=0,i=slideLi.length;
t<i;
t++){
var s=e.getByClass("item",slideLi[t],"div")[0],a=s.getElementsByTagName("a"),l=e.getByClass("num",slideLi[t],"div")[0],n=e.getByClass("text",slideLi[t],"div")[0],r=n.getElementsByTagName("span")[0];
if(a.length>1){
a[0].className="cur";
l.innerHTML=1+"/"+a.length}
else{
l.style.display="none";
r.className="no-list"}
}
}
,control:function(){
var t=this,i=e("go_l"),s=e("go_r"),a=t.getLi(),l=t.getDiv();
i.onmouseover=function(){
clearInterval(t.t)}
;
i.onmouseout=function(){
t.animate()}
;
s.onmouseover=function(){
clearInterval(t.t)}
;
s.onmouseout=function(){
t.animate()}
;
i.onclick=function(e){
t.i--;
if(t.i<0){
t.i=a.length-1}
t.imgLoad(t.i);
t.initialState(t.i);
for(var i=0,s=a.length;
i<s;
i++){
a[i].className="";
if(t.i==i&&t.i!=s-1){
a[i].className="current"}
else if(t.i==s-1){
a[s-1].className="last current"}
else{
a[s-1].className="last"}
}
for(var n=0,r=l.length;
n<r;
n++){
if(t.i==n){
l[n].style.display="block"}
else{
l[n].style.display=""}
}
t.preventDefault(e)}
;
s.onclick=function(e){
t.i++;
if(t.i>a.length-1){
t.i=0}
t.imgLoad(t.i);
t.initialState(t.i);
for(var i=0,s=a.length;
i<s;
i++){
a[i].className="";
if(t.i==i&&t.i!=s-1){
a[i].className="current"}
else if(t.i==s-1){
a[s-1].className="last current"}
else{
a[s-1].className="last"}
}
for(var n=0,r=l.length;
n<r;
n++){
if(t.i==n){
l[n].style.display="block"}
else{
l[n].style.display=""}
}
t.preventDefault(e)}
}
,imgLoad:function(e){
var t=this,i=t.getDiv();
if(i[e].getElementsByTagName("li").length>0){
var s=i[e].getElementsByTagName("li")[0].getElementsByTagName("img");
for(var e=0,a=s.length;
e<a;
e++){
if(s[e].getAttribute("data-src")){
s[e].setAttribute("src",s[e].getAttribute("data-src"));
s[e].removeAttribute("data-src")}
}
}
}
,preventDefault:function(e){
if(e&&e.preventDefault){
e.preventDefault()}
else{
window.event.returnValue=false}
}
,getTarget:function(e){
return e.target||e.srcElement}
,bindEvent:function(){
var e=this;
var t=e.getLi(),i=null;
for(var s=0,a=t.length;
s<a;
s++){
!function(s){
t[s].onmouseover=function(a){
clearInterval(e.t);
for(var l=0,n=t.length;
l<n;
l++){
t[l].className="";
if(s==l&&s!=n-1){
t[l].className="current"}
else if(s==n-1){
t[n-1].className="last current"}
else{
t[n-1].className="last"}
}
var r=e.getByClass("item",this,"div")[0],o=r.getElementsByTagName("a"),g=e.getByClass("num",this,"div")[0],m=e.getByClass("text",this,"div")[0],c=m.getElementsByTagName("span")[0],u=e.getDiv()[s].getElementsByTagName("li");
m.onmouseover=function(){
if(o.length>1){
g.innerHTML=1+"/"+o.length}
else{
g.style.display="none";
c.className="no-list"}
for(var e=0,t=o.length;
e<t;
e++){
if(e==0){
o[e].className="cur"}
else{
o[e].className=""}
}
for(var i=0,s=u.length;
i<s;
i++){
if(i==0){
u[i].style.display="block"}
else{
u[i].style.display=""}
}
}
;
if(o.length>1){
r.style.display="block"}
e.imgLoad(s);
for(var f=0,v=o.length;
f<v;
f++){
!function(t){
o[t].onmouseover=function(){
i=setTimeout(function(){
g.innerHTML=t+1+"/"+o.length;
for(var e=0,i=o.length;
e<i;
e++){
if(t==e){
o[e].className="cur"}
else{
o[e].className=""}
}
!function(e){
for(var i=0,s=u.length;
i<s;
i++){
if(t==i){
u[i].style.display="block"}
else{
u[i].style.display=""}
var a=u[e].getElementsByTagName("img");
for(var l=0,n=a.length;
l<n;
l++){
if(a[l].getAttribute("data-src")){
a[l].setAttribute("src",a[l].getAttribute("data-src"));
a[l].removeAttribute("data-src")}
}
}
}
(t)}
,100)}
;
o[t].onmouseout=function(){
clearTimeout(i)}
;
o[t].onclick=function(t){
e.preventDefault(t)}
}
(f)}
var d=e.getDiv();
for(var y=0,h=d.length;
y<h;
y++){
if(y==s){
d[y].style.display="block"}
else{
d[y].style.display=""}
}
e.i=s}
;
t[s].onmouseout=function(){
e.animate();
e.getByClass("item",this,"div")[0].style.display=""}
}
(s)}
}
,areaImgLoad:function(e){
if(e.length>0){
for(var t=0,i=e.length;
t<i;
t++){
if(document.getElementById(e[t][0])){
if(document.getElementById(e[t][0]).getElementsByTagName("img").length>0){
var s=document.getElementById(e[t][0]).getElementsByTagName("img");
if(s.length>0){
for(var a=0,l=e[t][1];
a<l;
a++){
if(s[a]){
if(s[a].getAttribute("gome-src")){
s[a].setAttribute("src",s[a].getAttribute("gome-src"));
s[a].removeAttribute("gome-src")}
else{
s[a].setAttribute("src",s[a].getAttribute("data-src"));
s[a].removeAttribute("data-src")}
}
}
}
}
}
}
}
}
}
;
t.init({
speed:5e3}
)}
();
CSS代码(chinaz.css):
html{overflow-x:auto;overflow-y:scroll}
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,menu{font-weight:400;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:100%;font-weight:400}
body{background-color:#fff;color:#333;font:normal 12px/1.5 'Arial','SimSun','Tahoma','Helvetica','sans-serif';text-align:left}
fieldset,img{border:0 none}
img{vertical-align:middle}
address,caption,em,strong,th,i{font-style:normal;font-weight:400}
ol,ul,li{list-style-image:none;list-style-position:outside;list-style-type:none}
html,body{-webkit-text-size-adjust:none}
table,table td,table th{border-collapse:collapse;border-spacing:0}
a{text-decoration:none;color:#333;outline:0;cursor:pointer}
a:hover{color:#C00;text-decoration:underline}
.link{color:#06c}
a:hover.link{color:#06c;text-decoration:underline}
.highlight{color:#C00}
.light{color:#C00}
.lowlight{color:#999}
.dn{display:none}
.db{display:block}
.dib{display:inline-block}
.bgf5{background:#f5f5f5}
.Jslide .dir{height:50px;width:30px;position:absolute;top:173px;display:none;background:#333 url(slide_sprite.png) no-repeat 0 0;filter:Alpha(Opacity = 40);opacity:.4;text-decoration:none}
.voice-search{opacity:.55;filter:alpha(opacity=55);float:right;padding:6px 0;cursor:pointer;width:15px;height:20px;background-size:13px 19px}
#icon_tab_wrap{position:relative;border-right:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6}
.pt10{padding-top:10px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pr10{padding-right:10px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pl10{padding-left:10px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb25{margin-bottom:25px}
.mb30{margin-bottom:30px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.lh22{line-height:22px}
.lh25{line-height:25px}
.i-triangle{position:absolute;width:0;height:0;border:4px dashed transparent;border-color:#333 transparent transparent transparent;border-bottom:0;border-top-style:solid}
.wbox{width:1210px;margin:0 auto;clear:both}
.wbox:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}
.wbox{display:block;*display:inline-block;zoom:1}
section.wbox{display:block}
.pt10{padding-top:10px}
.mb1{margin-bottom:1px}
.mb5{margin-bottom:5px}
.slide_box{padding-left:200px}
.Jslide{height:419px;width:739px;border-bottom:1px solid #e6e6e6;border-right:1px solid #e6e6e6;float:left;position:relative;overflow:hidden;z-index:100}
.Jslide img{display:block;_float:left}
.Jslide a:focus{outline:0}
.Jslide .dir:hover{filter:Alpha(Opacity = 70);opacity:.7}
.Jslide .go_l{left:4px;background-position:0 0}
.Jslide .go_r{left:705px;background-position:0 -50px}
.Jslide .slide-tab{display:block;height:30px;position:absolute;left:0;bottom:0}
.Jslide .slide-tab li{display:inline-block;float:left;margin-right:1px;height:30px;width:91px;position:relative}
.Jslide .slide-tab .last{width:94px}
.Jslide .slide-tab .last .text{width:94px}
.Jslide .slide-tab li .text{height:30px;width:91px;position:relative}
.Jslide .slide-tab li em{display:block;height:30px;background:#333;filter:Alpha(Opacity = 70);opacity:.7}
.Jslide .slide-tab li.current em{background:#c00;filter:Alpha(Opacity = 80);opacity:.8}
.Jslide .slide-tab li span{display:block;width:80px;margin-left:5px;cursor:default;overflow:hidden;height:30px;position:absolute;left:0;top:0;top:1px\9;_top:2px;text-align:center;font:normal 12px/30px Arial;color:#fff}
.Jslide .slide-tab li.current span.no-list{width:106px;margin-left:-8px}
.Jslide .slide-tab li.current span{font-weight:bold;color:#fff;margin-left:-4px}
.Jslide .slide-tab li .num{height:12px;line-height:12px;position:absolute;right:8px;top:10px;color:#fff;display:none;z-index:10;cursor:default}
.Jslide .slide-tab .last .item{width:94px}
.Jslide .slide-tab li.current .num{display:block}
.Jslide .slide-tab .item{width:91px;position:absolute;left:0;background:#c00;filter:Alpha(Opacity = 80);opacity:.8;display:none;cursor:default}
.Jslide .slide-tab .item a{display:block;height:25px;line-height:25px;text-align:center;color:#eea8a8;text-decoration:none;cursor:default;overflow:hidden}
.Jslide .slide-tab .item a:hover,.Jslide .slide-tab .item a.cur{color:#fff;text-decoration:none;background:#dd5151;filter:Alpha(Opacity = 100);opacity:1}
.Jslide .slide-list{background:url(loadingnormal.gif) no-repeat center center}
.Jslide .slide-list,.Jslide .slide-list .slide-ul{height:419px;width:739px}
.Jslide .slide-list .slide-ul{display:none}
.Jslide .slide-list .block{display:block}
.Jslide .slide-ul li{height:419px;width:739px;position:relative;display:none}
.Jslide .slide-ul li img{_float:left}
.Jslide .slide-ul li a{display:block;overflow:hidden}
.Jslide .slide-ul li.w1 .a_0,.Jslide .slide-ul li.w1 .a_0 img{height:419px;width:739px}
.Jslide .slide-ul li.w4 .a_0,.Jslide .slide-ul li.w4 .a_0 img{height:419px;width:559px}
.Jslide .slide-ul li.w4 .a_1,.Jslide .slide-ul li.w4 .a_2,.Jslide .slide-ul li.w4 .a_3{position:absolute;right:0;_right:-1px;height:210px;width:180px}
.Jslide .slide-ul li.w4 .a_1 img,.Jslide .slide-ul li.w4 .a_2 img,.Jslide .slide-ul li.w4 .a_3 img{height:210px;width:180px}
.Jslide .slide-ul li.w4 .a_1{top:0}
.Jslide .slide-ul li.w4 .a_2{top:210px}
.Jslide .slide-ul li.w4 .a_3{top:280px;border-bottom:0 none}
.Jslide .slide-ul li.w6 .a_0,.Jslide .slide-ul li.w6 .a_0 img{height:279px;width:529px}
.Jslide .slide-ul li.w6 .a_1,.Jslide .slide-ul li.w6 .a_2,.Jslide .slide-ul li.w6 .a_3,.Jslide .slide-ul li.w6 .a_4,.Jslide .slide-ul li.w6 .a_5{position:absolute}
.Jslide .slide-ul li.w6 .a_1,.Jslide .slide-ul li.w6 .a_2{left:0;top:279px;border-right:1px solid #e6e6e6;border-top:1px solid #e6e6e6;height:139px;width:264px}
.Jslide .slide-ul li.w6 .a_1 img,.Jslide .slide-ul li.w6 .a_2 img{height:139px;width:264px}
.Jslide .slide-ul li.w6 .a_2{left:265px;border-right:0 none}
.Jslide .slide-ul li.w6 .a_3,.Jslide .slide-ul li.w6 .a_4,.Jslide .slide-ul li.w6 .a_5{right:0;top:0;_right:-1px;border-left:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;height:139px;width:209px}
.Jslide .slide-ul li.w6 .a_4{top:140px}
.Jslide .slide-ul li.w6 .a_5{top:280px;border-bottom:0 none}
.Jslide .slide-ul li.w6 .a_3 img,.Jslide .slide-ul li.w6 .a_4 img,.Jslide .slide-ul li.w6 .a_5 img{height:139px;width:209px}
.w990 .slide-tab{left:0;bottom:0}
.w990 .Jslide{width:529px}
.w990 .Jslide .go_r{left:496px}
.w990 .slide-tab li{width:61px}
.w990 .slide-tab li.current{width:94px}
.w990 .slide-tab li .text{width:61px}
.w990 .slide-tab li.last .text{width:61px}
.w990 .slide-tab li.current .text{width:94px}
.w990 .slide-tab .item{width:94px}
.w990 .slide-tab .last{width:61px}
.w990 .slide-list,.w990 .slide-list .slide-ul,.w990 .slide-list .slide-ul li{width:529px}
.w990 .slide-tab li .num{right:5px}
.w990 .slide-tab li span{text-align:center;width:61px;white-space:nowrap;margin-left:0}
.w990 .slide-tab li.current span{display:block;width:95px;text-indent:2px;overflow:hidden;text-align:center;margin-left:-10px}
.w990 .slide-tab li.current span.no-list{width:86px;margin-left:0}
.w990 .slide-ul li.w1 .a_0,.w990 .slide-ul li.w1 .a_0 img{width:529px}
.w990 .slide-ul li.w4 .a_0{width:529px}
.w990 .slide-ul li.w4 .a_1,.w990 .slide-ul li.w4 .a_2,.w990 .slide-ul li.w4 .a_3{width:175px;display:none}
.w990 .slide-ul li.w6 .a_0{width:529px}
.w990 .slide-ul li.w6 .a_1,.w990 .slide-ul li.w6 .a_2{width:264px}
.w990 .slide-ul li.w6 .a_2{left:265px}
.w990 .slide-ul li.w6 .a_3,.w990 .slide-ul li.w6 .a_4,.w990 .slide-ul li.w6 .a_5{width:175px;display:none}
分享到QQ
分享到微博
微信扫一扫
