<!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>無標題文檔</title>
<style?type="text/css">
body,html,div,ul,ol,li{padding:?0;?margin:0;}
li{list-style:none;}
.all{
????width:650px;
????height:250px;
????margin:100px?auto;
????overflow:hidden;
????position:relative;
}
.all?ul{
????position:relative;
????z-index:1;????
}
.all?ul?li?{
????position:absolute;
????left:0;
????top:0;
}
.all?ol?{
????position:absolute;
????right:10px;
????bottom:10px;
????z-index:2;
}
.all?ol?li?{
????float:left;
????width:20px;
????height:20px;
????line-height:20px;
????text-align:center;
????margin:10px?0?0?10px;
????background:#333;
????border:1px?solid?#ccc;
????color:#eee;
????font-weight:bold;
????cursor:pointer;
????display:none;
}
.all:hover?ol?li{
????display:block;
}
.all?ol?.current{
????width:30px;
????height:30px;
????line-height:30px;
????color:#f60;
????border:1px?solid?#f60;
????margin-top:0;
}
</style>
<script?type="text/javascript"?src="jquery-1.7.2.min.js"></script>
<script?type="text/javascript">
$(function(){
????var?num?=?6;
????$('ol?li').mouseover(function(){
????????$("li").attr('class','');
????????$(this).attr('class','current');
????
????????var?num2?=?$(this).index();
????????$('ul?li').eq(num2).css('left','650px');
????????num++;
????????$('ul?li').eq(num2).css('z-index','num');
????????$('ul?li').eq(num2).animate({left:0},400);
????})
})
</script>
</head>
<body>
<div?class="all">
????<ul>
????????<li><a?href=""><img?src="01.jpg"?width="650"?height="250"?/></a></li>
????????<li><a?href=""><img?src="02.jpg"?width="650"?height="250"?/></a></li>
????????<li><a?href=""><img?src="03.jpg"?width="650"?height="250"?/></a></li>
????????<li><a?href=""><img?src="04.jpg"?width="650"?height="250"?/></a></li>
????????<li><a?href=""><img?src="05.jpg"?width="650"?height="250"?/></a></li>
????</ul>
????<ol>
?????????<li>1</li>
?????????<li>2</li>
?????????<li>3</li>
?????????<li>4</li>
?????????<li?class="current">5</li>
??</ol>
</div>
</body>
</html>不知道哪里出了問題。求大神解答。。。
jq banner問題。新手求指導。。。
小黃金
2015-11-20 02:11:57
