html------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style/main.css">
<script src="jquery-1.11.2.js" ></script>
<script src="demo.js"></script>
</head>
<body>
<div class="banner">
<img src="" alt="第一张轮播器" class="first">
<img src="" alt="第二张轮播器" class="second">
<img src="" alt="第三张轮播器" class="third">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
<strong></strong>
</div>
</body>
</html>
css--------------------------------
*{padding: 0;margin: 0;}
ul{list-style-type: none;}
.first{
width: 800px;
height: 400px;
background: red;
}
.second{
width: 800px;
height: 400px;
background: green;
}
.third{
width: 800px;
height: 400px;
background: yellow;
}
.banner{
width: 800px;
height: 400px;
position: relative;
margin: 0 auto;
}
img{
position: absolute;
top: 0;
left: 0;
z-index:1;
}
ul{
position: absolute;
top:380px;
left: 300px;
z-index: 4;
}
ul li{
float: left;
width: 30px;
height: 20px;
display: block;
border: 1px solid #000;
margin-left: 20px;
text-align: center;
line-height: 20px;
cursor:pointer;
}
span{
width: 800px;
height: 20px;
display: block;
position: absolute;
top: 380px;
left: 0;
background: #ccc;
z-index:3;
opacity:0.6;
}
strong{
width: 800px;
height: 20px;
display: block;
position: absolute;
top: 380px;
left: 0;
z-index: 4;
}
js----------------------------------
$(function () {
$("img").css("display","none");
$("img").eq(0).css("display","block");
$(".banner ul li").eq(0).css("background","red");
$(".banner strong").html($("img").eq(0).attr("alt"));
$("ul li").hover(
function() {
$("img").css("display","none");
$("img").eq($(this).index()).css("display","block");
$("ul li").css("background","#fff");
$("ul li").eq($(this).index()).css("background","red");
$(".banner strong").html($("img").eq($(this).index()).attr("alt"))
},function(){
})
})
我看视频做的一个轮播器，用是可以用。不过性能很低，要很久才能反应过来。求大婶指教。
