高分求助用jQuery+html+css实现这种效果的幻灯

以下提供我的html和css段落，你们写jQuery的时候，html跟css怎么方便怎么写吧，不一定要跟我一样。=============html部分是：<divclas... 以下提供我的html和css段落，你们写jQuery的时候，html跟css怎么方便怎么写吧，不一定要跟我一样。
=============
html部分是：
<div class="m1c-top" id="Slideshow">
<a href="" target="_blank" title="" id="m01" class="display"><img src="images/img1.jpg" alt="60元清仓大促销" width="504" height="250" /></a>
<a href="" target="_blank" title="" id="m02" class="hidden"><img src="images/img2.jpg" alt="精品区金秋献礼" width="504" height="250" /></a>
<a href="" target="_blank" title="" id="m03" class="hidden"><img src="images/img3.jpg" alt="60元清仓大促销" width="504" height="250" /></a>
<a href="" target="_blank" title="" id="m04" class="hidden"><img src="images/img4.jpg" alt="精品区金秋献礼" width="504" height="250" /></a>
<ul>
<li id="c01" class="sd01"><a href="" target="" title="60元清仓大促销">60元清仓大促销</a></li>
<li id="c02" class="sd02"><a href="" target="" title="精品区金秋献礼">精品区金秋献礼</a></li>
<li id="c03" class="sd02"><a href="" target="" title="60元清仓大促销">60元清仓大促销</a></li>
<li id="c04" class="sd02" style="border:none"><a href="" target="" title="精品区金秋献礼">精品区金秋献礼</a></li>
</ul>
</div>
=============
css部分是：
.m1c-top{height:250px; overflow:hidden; position:relative; z-index:0;}
.m1c-top a img{ width:504px; height:250px;}
.m1c-top ul{ position:absolute; bottom:0px; width:504px; height:26px; }
.m1c-top ul li{float:left; height:26px; line-height:26px; width:125px; border-right:1px solid #FFF; text-align:center;}
.m1c-top ul li a{ color:#FFF; font-weight:bold;}
.m1c-top ul li a:hover{ color:#FFF; text-decoration:none;}
.sd01{ background:url(swf-bg0.png) repeat; width:126px;}
.sd02{ background:url(swf-bg.png) no-repeat; width:126px;}

=============

效果如图所示。必须自动切换，且当鼠标放到下面的标题中，显示对应的图片，总而言之，就跟普通的焦点图幻灯一样。我尝试着自己用 jQuery写了一下，但是很多bug，所以希望高手能用 jQ实现这种效果，不胜感激！
请看图：展开

 我来答

2个回答

#热议# 为什么说不要把裤子提到肚脐眼？

lgliufei
2011-10-17

知道答主

回答量：3

采纳率：0%

帮助的人：8.6万

我也去答题访问个人页

关注

展开全部

<head>
<title>搜索条</title>
<meta NAME="Generator" CONTENT="EditPlus">
<meta NAME="Author" CONTENT="">
<meta NAME="Keywords" CONTENT="">
<meta NAME="Description" CONTENT="">
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>

<style>

*{ list-style:none; margin:0; padding:0;}
.see{ display: block;}
.hid{ display: none;}
.m1c-top{height:280px; overflow:hidden; position:relative; width:504px;}
.m1c-top a img{ width:504px; height:250px; border:none; z-index:1}
.m1c-top ul{ position:absolute; bottom:0px; width:504px; ;height:26px; left:0; z-index:100; }
.m1c-top ul li{float:left; height:26px; line-height:26px; width:125px; border-right:1px solid #FFF; text-align:center; font-size:12px;}
.m1c-top ul li a{ color:#666; font-weight:bold; display:block; text-align:center; width:125px; }
.m1c-top ul li a:hover{ color:#333; text-decoration:none;}
.m1c-top ul li.sd01 a{ background:#ff0000; width:125px;}
.m1c-top ul li.sd02 a{ background:#fff; width:125px; }

</style>

</head>
<body>
<div class="m1c-top" id="Slideshow">
<a href="" target="_blank" title="" class="hid"><img src="images/di.jpg" alt="60元清仓大促销" width="504" height="250" /></a>
<a href="" target="_blank" title="" class="see"><img src="images/tou.jpg" alt="精品区金秋献礼" width="504" height="250" /></a>
<a href="" target="_blank" title="" class="hid"><img src="images/wei.jpg" alt="60元清仓大促销" width="504" height="250" /></a>
<a href="" target="_blank" title="" class="hid"><img src="images/2.jpg" alt="精品区金秋献礼" width="504" height="250" /></a>
<ul>
<li class="sd02"><a href="" target="" title="60元清仓大促销">60元清仓大促销</a></li>
<li class="sd01"><a href="" target="" title="精品区金秋献礼">精品区金秋献礼</a></li>
<li class="sd02"><a href="" target="" title="60元清仓大促销">60元清仓大促销</a></li>
<li class="sd02"><a href="" target="" title="精品区金秋献礼">精品区金秋献礼</a></li>
</ul>
</div>

<script type="text/javascript">
var i=0;
$pic = $("#Slideshow > a");
$btn = $("li");
var set;
function auto(){
i<($btn.length-1)?i++:i=0;

$pic.eq(i).attr("class","see");
$pic.not($pic.eq(i)).attr("class","hid");
$btn.eq(i).attr("class","sd01").siblings().attr("class","sd02");
}
$btn.each(function(e){
$(this).mouseover(function(){
clearInterval(set);
i=e;
$pic.eq(i).attr("class","see");
$pic.not($pic.eq(i)).attr("class","hid");
$btn.eq(i).attr("class","sd01").siblings().attr("class","sd02");

}).mouseout(function(){set= setInterval("auto()", 1000); })
})
set= setInterval("auto()", 1000);

</script>
</body>

实验下，修改下图片

已赞过 已踩过<

评论收起

手机用户62452
2011-10-08

知道答主

回答量：24

采纳率：0%

帮助的人：6.7万

我也去答题访问个人页

关注

展开全部

qpiSXB

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

高分求助用jQuery+html+css实现这种效果的幻灯

其他类似问题

为你推荐：