<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图定位</title>
<script src="./js/jquery-1.8.3.min.js"></script>
<style>
.out{width:100%;height:400px;overflow:hidden;}
.out>ul li{width:100%;position:absolute;top:0;left:0;height:400px;overflow:hidden;display:none;}
.out>ul li>a{width:1920px;position:absolute;top:0;left:50%;margin-left:-960px;height:400px;}
.out>ul li>a>img{width:1920px;height:400px;display:block;}
.fix{margin:0 auto;width:1200px;background:green;/*opacity:0.5;*/z-index:999;height:400px;}
.in{width:100%;position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div class="out">
<div class="in"><div class="fix"></div></div>
<ul>
<li style="display:block;"><a href=""><img src="./src/1.jpg" alt=""></a></li>
<li><a href=""><img src="./src/2.jpg" alt=""></a></li>
<li><a href=""><img src="./src/3.jpg" alt=""></a></li>
</ul>
</div>
<h1>1</h1>
</body>
<script>
var lindex=0;
imglen=$("ul li").length;
//自动切换定时器处理
var autoChange=setInterval(function(){
if(lindex<imglen-1){
lindex++;
}else{
lindex=0;
}
//调用变换处理函数
changeTo(lindex);
},1000);
function changeTo(b){
$("h1").html(b);
$("ul li").each(function(){
tt=$(this).index();
if(tt==b){
$(this).css("display","block");
$("ul li").not($(this)).css("display","none");
}
})
}
</script>
</html>
网友评论