<div class="t4BxaL fld">
<div class="t4BxaLc"> <a><img src="http://img4.aili.com/201312/30/1388373650_92731900.jpg" width="680" height="420"></a> </div>
<div class="t4BxaLc" style="display:none;"> <a><img src="http://topic.aili.com/images/topic_digital17/zz3.jpg " width="680" height="420"></a> </div>
<div class="t4BxaLc" style="display:none;"> <a><img src="http://img4.aili.com/201312/30/1388373650_92823200.jpg" width="680" height="420"></a> </div>
<a class="t4BaL" style="display:none;"></a> <a class="t4BaR" style="display:none;"></a>
<div class="m4Bbtn">
<ul>
<li id="m0" class="m4Bbtn_hov">
<div class="m4Bbtn1"><span class="tV3"></span></div>
<div class="m4Bbtn2"><span class="tV3"></span></div>
</li>
<li id="m1">
<div class="m4Bbtn1"><span class="tV3"></span></div>
<div class="m4Bbtn2"><span class="tV3"></span></div>
</li>
<li id="m2">
<div class="m4Bbtn1"><span class="tV3"></span></div>
<div class="m4Bbtn2"><span class="tV3"></span></div>
</li>
</ul>
</div>
</div>
.t4BxaLc { width: 680px; height: 420px; overflow: hidden; position: relative; }
.t4BxaLc .t4S { width: 400px; height: 100px; opacity: 0.4; filter: Alpha(Opacity=40); -moz-opacity: 0.4; background: #fff; position: absolute; left: 140px; bottom: 29px; }
.t4BxaLc .tExp { width: 400px; height: 100px; position: absolute; left: 140px; bottom: 29px; }
.t4BxaLc .tExp .t1 { display: block; height: 55px; line-height: 55px; text-align: center; font-size: 20px; border-bottom: 1px dotted #333; color: #000; }
.t4BxaLc .tExp .t2 { display: block; height: 44px; line-height: 44px; text-align: center; font-size: 14px; color: #000; }
.t4BxaLc .tExp .t1:hover, .t4BxaLc .tExp .t2:hover { color: #D71E1E; }
.t4BaL, .t4BaR { cursor: pointer; width: 60px; height: 78px; position: absolute; top: 154px; display: inline-block; background: url(http://images.aili.com/aili_v4/t_bgc.png) no-repeat; _background: url(http://images.aili.com/aili_v4/t_bgd.gif) no-repeat; }
.t4BaL { left: 0; background-position: 0 0; }
.t4BaR { right: 0; background-position: -65px 0; }
.t4BaL:hover, .t4BaR:hover { background-color: #000; }
.m4Bbtn { width: 80px; height: 10px; line-height: 0px; font-size: 0; position: absolute; top: 404px; left: 318px; }
.m4Bbtn ul { width: 80px; height: 10px; display: block; overflow: hidden; }
.m4Bbtn li { width: 10px; height: 10px; display: block; overflow: hidden; float: left; margin-right: 4px; cursor: pointer; }
.m4Bbtn div { width: 10px; height: 10px; overflow: hidden; }
.m4Bbtn span { width: 10px; height: 10px; display: block; overflow: hidden; }
.m4Bbtn li .m4Bbtn1 { display: block; }
.m4Bbtn li .m4Bbtn2 { display: none; }
li.m4Bbtn_hov .m4Bbtn1 { display: none; }
li.m4Bbtn_hov .m4Bbtn2 { display: block; }
.m4Bbtn1 span { background: url(http://images.aili.com/aili_v4/mIcon.png) no-repeat 0 0; }
.m4Bbtn2 span { background: url(http://images.aili.com/aili_v4/mIcon_hov.png) no-repeat 0 0; }
.t4BxaL { width: 680px; height: 420px; position: relative; }
// JavaScript Document
$(document).ready(function() {
$(".t4BxaL .t4BxaLc").hide().eq(0).show();
var length=$(‘.m4Bbtn li‘).length;
var autoNum=0,autoTime;
$(‘.t4BxaL‘).hover(function(){
clearInterval(autoTime);
$(".t4BaR").stop(false,true).fadeIn("slow");
$(".t4BaL").stop(false,true).fadeIn("slow");
return false;
},function(){
autoTime=setInterval(auto,5000);
$(".t4BaR").hide();
$(".t4BaL").hide();
return false;
});
autoTime=setInterval(auto,3000);
function auto(){
autoNum++;
if(autoNum>=length){autoNum=0;}
$(".t4BxaL .t4BxaLc").hide().eq(autoNum).stop(false,true).fadeIn("slow");;
$(‘.m4Bbtn li‘).removeClass(‘m4Bbtn_hov‘).eq(autoNum).addClass(‘m4Bbtn_hov‘);
}
$(‘.m4Bbtn li‘).each(function(index){
$(this).click(function(){
if(index==autoNum) return false;
autoNum=index;
$(".t4BxaL .t4BxaLc").hide().eq(autoNum).stop(false,true).fadeIn("slow");;
$(‘.m4Bbtn li‘).removeClass(‘m4Bbtn_hov‘).eq(autoNum).addClass(‘m4Bbtn_hov‘);
return false;
})
})
$(‘.t4BaL‘).bind(‘click‘,function(){
autoNum--;
if(autoNum<0){autoNum=length-1;}
$(".t4BxaL .t4BxaLc").hide().eq(autoNum).stop(false,true).fadeIn("slow");
$(‘.m4Bbtn li‘).removeClass(‘m4Bbtn_hov‘).eq(autoNum).addClass(‘m4Bbtn_hov‘);
return false;
})
$(‘.t4BaR‘).bind(‘click‘,function(){
auto();
return false;
})
})
本文出自 “糖糖阁” 博客，请务必保留此出处http://lovesnow.blog.51cto.com/8334309/1355125