高分求助用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实现这种效果，不胜感激！展开

 我来答

3个回答

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

Victoriness
2011-10-17 · TA获得超过707个赞

知道答主

回答量：97

采纳率：0%

帮助的人：84.2万

我也去答题访问个人页

关注

展开全部

给你写了一个插件。你看看是不是这样的。图片自动向右滚动，可以鼠标滑动切换图片。有问题可以联系我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin Header</title>
<style type="text/css">
.m1c-top {
height: 250px;
float:left;
overflow: hidden;
position: relative;
}
.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;
}
/*以下为我追加的样式*/
* {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
.scrollImg {
width: 504px;
overflow: hidden;
}
.scrollImgContent {
width: 3000px;
}
.scrollImgContent a {
display: inline-block;
}
.m1c-top ul li{
background-color:#ccc;
}
.m1c-top ul li.current{
background-color:red;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js?ver=3.1.2"></script>
<script type="text/javascript">
(function($) {
$.fn.imgSlider = function(settings) {
settings = jQuery.extend({
speed : 500,
line : 2,
timer : 1000
}, settings);
return this.each(function() {
$.fn.imgSlider.scllor($(this), settings);
});
};
$.fn.imgSlider.scllor = function($this, settings) {
var content = $(".scrollImgContent", $this);
var handle = $this.next('ul');
var timerID;
var isTimeout;
var links = content.children('a');
var aWidth = $(links[0]).width();
var scrollWidth = 0 - (settings.line + 1) * aWidth;
content.css({marginLeft:-aWidth});
var scrollLeft=function(){
content.animate({marginLeft:-0},settings.speed,function(){
for(i=0;i<settings.line;i++){
content.find("a:last").prependTo(content);
}
content.css({marginLeft:-aWidth});
var cur=$(content.find("a")[1]).attr('num');
$(handle.find('a')[cur]).parent().addClass('current').siblings().removeClass('current');
});
};
var scrollRight=function(){
content.animate({marginLeft:scrollWidth},settings.speed,function(){
for(i=0;i<settings.line;i++){
content.find("a:first").appendTo(content);
}
content.css({marginLeft:-aWidth});
var cur=$(content.find("a")[1]).attr('num');
$(handle.find('a')[cur]).parent().addClass('current').siblings().removeClass('current');
});
};
var hoverPlay=function(j) {
var cur=$(content.find("a")[1]).attr('num');
if(j<cur){
for(i=0;i<(cur-j);i++){
content.animate({marginLeft:0},(settings.speed/(cur-j)),function(){
content.find("a:last").prependTo(content);
content.css({marginLeft:-aWidth});
});
}
$(handle.find('a')[j]).parent().addClass('current').siblings().removeClass('current');
}
if(j>cur){
var scrollWidth = 0 - (j-cur+1) * aWidth;
content.animate({marginLeft:scrollWidth},settings.speed,function(){
for(i=0;i<(j-cur);i++){
content.find("a:first").appendTo(content);
}
content.css({marginLeft:-aWidth});
$(handle.find('a')[j]).parent().addClass('current').siblings().removeClass('current');
});
}
};
var autoPlay=function() {
timerID = window.setInterval(scrollRight, settings.timer);
};
var autoStop=function() {
window.clearInterval(timerID);
};
//事件绑定
//$this.parent().hover(autoStop, autoPlay).mouseout();
handle.find('a').mouseover(function(){
var j=$(this).attr('num');
isTimeout = setTimeout(function(){
hoverPlay(j);
}, 300);
}).mouseout(function(){
clearTimeout(isTimeout);
});
};
})(jQuery);
$(function() {
$(".scrollImg").imgSlider({
line : 1,
timer : 2000
})
})
</script>
</head>
<body>
<div class="m1c-top" id="Slideshow">
<div class="scrollImg">
<div class="scrollImgContent">
<a href="" target="_blank" title="" id="m01" num='0'><img src="http://tupian.feiku.com/data/pic/20091029/1256784327537798.jpg" alt="60元清仓大促销" /></a>
<a href="" target="_blank" title="" id="m02" num='1'><img src="http://tupian.feiku.com/data/pic/20100108/1262932840790321.jpg" alt="精品区金秋献礼" /></a>
<a href="" target="_blank" title="" id="m03" num='2'><img src="http://www.fishjava.com/img/eac5b190/1a988e7994096d73fb09.jpg" alt="60元清仓大促销" /></a>
<a href="" target="_blank" title="" id="m04" num='3'><img src="http://www.sjjia.com/shoujitupian/downfileq/rhc/97fad17f2rhcsqw.jpg" alt="精品区金秋献礼" /></a>
</div>
</div>
<ul>
<li id="c01" class="sd01">
<a href="http://zhidao.baidu.com/question/327004714.html?an=0&si=6" target="" title="60元清仓大促销" num='0'>60元清仓大促销</a>
</li>
<li id="c02" class="sd02 current">
<a href="http://zhidao.baidu.com/question/327004714.html?an=0&si=6" target="" title="精品区金秋献礼" num='1'>精品区金秋献礼</a>
</li>
<li id="c03" class="sd02">
<a href="http://zhidao.baidu.com/question/327004714.html?an=0&si=6" target="" title="60元清仓大促销" num='2'>60元清仓大促销</a>
</li>
<li id="c04" class="sd02" style="border:none">
<a href="http://zhidao.baidu.com/question/327004714.html?an=0&si=6" target="" title="精品区金秋献礼" num='3'>精品区金秋献礼</a>
</li>
</ul>
</div>
</body>
</html>

追问

无法自动播放？？

参考资料： http://www.itfe.org/?p=310

已赞过 已踩过<

评论收起

lgliufei
推荐于2016-09-23

知道答主

回答量：3

采纳率：0%

帮助的人：8.5万

我也去答题访问个人页

关注

展开全部

<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>

实验下， 修改下图片


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

wennoyue
2011-10-09 · TA获得超过242个赞

知道小有建树答主

回答量：210

采纳率：0%

帮助的人：195万

我也去答题访问个人页

关注

展开全部

我有JS可以实现这个效果，可以么，你可以找找myFocus DEMO

已赞过 已踩过<

评论收起

更多回答（1）

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

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

为你推荐：