只需要定义一个有高度和宽度的div,然后调用函数,将该div的id传入即可。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>幻灯片</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function sliderInit(box){
var jbox=$('#'+box);
var w=jbox.width();
var h=jbox.height();
jbox.css({border:'1px solid #dfdfdf',position:'relative'});
var divs=$('div',jbox);
var num = divs.size();
divs.each(function(i){
if(i!=0)
$(this).hide();
$('img',this).css({width:w,height:h});
$('a',this).css({display:'block',width:w,height:'24px',lineHeight:'24px',position:'absolute',bottom:'0px',left:'0px',background:'#000',color:'#ffffff',fontSize:'12px',opacity:'.7',fontWeight:'bold'});
});
var dsq=setInterval(loop,3000);
function loop(){
var curr=$('div:visible',jbox);
var index=divs.index(curr);
if(index==(num-1))
next=0;
else
next=index+1;
curr.hide();
$(divs.get(next)).show();
}
}
</script>
<style type="text/css">
#slider{
width:300px;
height:200px;
}
</style>
</head>
<body>
<div id="slider">
<div>
<img src="images/1.jpg"/>
<a href="#">幻灯片1</a>
</div>
<div>
<img src="images/2.jpg"/>
<a href="#">幻灯片2</a>
</div>
<div>
<img src="images/3.jpg"/>
<a href="#">幻灯片3</a>
</div>
</div>
<script>
sliderInit('slider');
</script>
</body>
</html>
运行效果图: