<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播demo</title>
</head>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<style>
*{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
a{
text-underline-style: none;
}
div{
width: 400px;
height: 200px;
}
img{
width：400px;
height: 200px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#ul2 li{
display: inline;
height: 20px;
float: left;
width: 30px;
line-height: 100%;
text-align: center;
}
#ul2{
position: absolute;
background-color: #ccc;
width: 150px;
height: 20px;
z-index: 100;
left: 0px;
top: 200px;
}
#ul2 li:hover{
background-color: red;
}
</style>
<body>
<div>
<ul>
<li><a href="#"><img src="../img/1.jpg" /></a></li>
<li><a href="#"><img src="../img/2.jpg" /></a></li>
<li><a href="#"><img src="../img/3.jpg" /></a></li>
<li><a href="#"><img src="../img/4.jpg" /></a></li>
<li><a href="#"><img src="../img/5.jpg" /></a></li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript" src="../js/lunbo.js" ></script>
</body>
</html>
$(document).ready(function() {
setInterval(function(){
move();
},1000);
$("#ul2 li").on({
"mouseover": function() {
var index = $("#ul2 li").index(this);
var x = $("img").eq(index).width();
$("img").eq(index).css("z-index", 2);
},
"mouseout": function() {
var index = $("#ul2 li").index(this);
$("img").eq(index).css("z-index", 1);
}
});
});
var i = 0;
function move(){
if(i >= 5){
i = 0;
}
$("img").eq(i).css("z-index",2);
$("img").eq(i-1).css("z-index",1);
i++;
}
