TAB + 滚动 + 时间间隔点击
<!DOCTYPE HTML PUBddC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<style>
ul,ol,p,dt,dd,dl,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0; }
img {border:0;}
li {list-style:none;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
.clear{ clear:both;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}
body{ padding:0; margin:0}
.tabimg{ width:1024px;height:592px; margin:0 auto; position:relative;}
.imgshow,#mrt{width:1000px; height:443px;}
.action{height:144px; overflow:hidden; width:918px;position:relative; margin-top:5px; margin-left:41px;}
.action dl{width:1840px; position:absolute;left:0px;}
.action dl dd{ width:228px; float:left; margin-right:2px;}
.action dl dd img { display:block; width:228px; height:140px}
.action span{ width:10px; height:200px; display:block; float:left}
.left{ width:51px; height:157px; background:url(http://img.zjhm.com/0Allppzt/test/tu1.gif) no-repeat; position:absolute; top:435; left:-12px;}
.right{ width:51px; height:157px; background:url(http://img.zjhm.com/0Allppzt/test/tu2.gif) no-repeat; position:absolute; top:435; right:12px;}
</style>
<body>
<dl class="tabimg">
<dt class="imgshow"><img id='mrt' src="http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg"></dt>
<div class='action'>
<dl>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0102_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0103_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0104_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0201_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0202_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0203_660×372.jpg"></dd>
<dd><img src="http://img.zjhm.com/newluxury/images/jdt0204_660×372.jpg"></dd>
</dl>
</div>
<ul>
<li class="left"></li>
<li class="right"></li>
</ul>
</dl>
<script>
var timing,time = 0;
$('.action dl dd').each(function(i) {
$(this).mouseover(function(){
$(this).css("opacity","0.6").siblings().css("opacity","1");
$('#mrt').attr("src",$('.action dl dd').children('img:eq('+i+')').attr('src')).fadeOut(50).fadeIn(50);
/*
上下图片不同
if(i == 0){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 1){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0102_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 2){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0103_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 3){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0104_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 4){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0201_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 5){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0202_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 6){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0203_660×372.jpg').fadeOut(50).fadeIn(50); }
if(i == 7){$('#mrt').attr("src",'http://img.zjhm.com/newluxury/images/jdt0204_660×372.jpg').fadeOut(50).fadeIn(50); }
*/
});
});
$(".left").click(function(){
if(time == 0){
time = 1;
timing = setTimeout("test()",500);
if(parseInt($(".action dl").css('left')) <= 0 && parseInt($(".action dl").css('left'))>-920){
$(".action dl").animate({
left:'-=230px'
},500);
}
}
});
$(".right").click(function(){
if(time == 0){
time = 1;
timing = setTimeout("test()",500);
if(parseInt($(".action dl").css('left')) < 0 && parseInt($(".action dl").css('left'))>=-920){
$(".action dl").animate({
left:'+=230px'
},500);
}
}
});
function test(){
if(time == 1){
time--;
}
}
</script>
</body>
</html>
