<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery实现图片轮播</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width:600px;height:240px;position: relative;}
#pic{width:600px;height:240px;position: relative;top:0px;left:0px;}
img{position: absolute;}/* 将三个图片层叠在一起 */
#but{ width:120px; height:25px;position: absolute;
border: 1px solid #3ff;bottom:5px; right: 0px;}
#but ul li{list-style:none;width:25px; height:25px; float:left;background:#ccff99;
border-radius:15px;text-align:center; line-height:20px;margin-right: 5px;
}
#but ul .sel{background: #ccffff;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var index = 0,begin = null;
var picNums = $("#pic img").length;
$("#but ul li").hover(function(){
clearInterval(begin);//鼠标移上,清除定时器对象
$(this).addClass("sel").siblings().removeClass("sel");
index = $("#but ul li").index();
$("#pic img").eq(index).show().siblings().hide();
},function(){auto();});//鼠标移走执行auto函数,执行定时器
function auto(){
begin = setInterval(function(){//定时器,每秒转换图片
index++;
if(picNums == index){
index = 0;
}
$("#but ul li").eq(index).addClass("sel").siblings().removeClass("sel");
$("#pic img").eq(index).show().siblings().hide();
}, 1000);
}
auto();
})
</script>
</head>
<body>
<div id="box">
<div id="pic">
<img src="imgs/1.jpg" width= 600 height=240/>
<img src="imgs/2.jpg" width= 600 height=240/>
<img src="imgs/3.jpg" width= 600 height=240/>
</div>
<div id="but">
<ul>
<li class="sel">1</li>
<li class="">2</li>
<li class="">3</li>
</ul>
</div>
</div>
</body>
</html>
时间： 2024-09-30 02:20:29