自己写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点
[/align]
<!DOCTYPE html>javascript?jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片切换</title>
<script type="text/javascript" src="jquery.min.js"></script> <!--别忘了引入 -->
<style type="text/css">
* { margin: 0; padding: 0; }
ul { list-style: none; }
.frame { width: 280px; height: 280px; overflow: hidden; margin: 0 auto; position: relative; }
.iframe { width: 840px; height: 280px; position: absolute; left: 0; z-index: 200; }
.iframe ul li { float: left; /*确定li的宽是必要的*/width:280px; }
.buttom { white-space: nowrap; position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.buttom a { display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; text-decoration: none; border-radius: 7px; }
.on { color: #000; background: #fff; }
.off { color: #fff; background: #000; }
</style>
<script type="text/javascript">
function boxfun(_box) {
var boxiframe = $(_box + " div.iframe");
var boxbuttom = $(_box + " div.buttom");
var li_width = boxiframe.find("li").width();//确定li的宽是必要的
var ss = parseInt(boxiframe.css("left"));
dd = setInterval(showimg, 2000);
boxbuttom.children().addClass("off");
boxbuttom.children().mouseenter(function () {
boxbuttom.children().addClass("off");
var a_id = boxbuttom.children().index($(this)[0]);
HuanDeng(a_id);
});
function HuanDeng(a_id) {
var left_px = a_id * -li_width + "" + "px";
boxbuttom.children().eq(a_id).removeClass("off").addClass("on").parent().siblings().stop(false,true).animate({ left: left_px });
ss = a_id * -li_width;
}
$(_box).mouseenter(function () {
clearInterval(dd);
}).mouseleave(function () {
dd = setInterval(showimg, 2000);
});
function showimg() {
if (ss >= /*-560*/li_width-boxiframe.children("ul").width() && ss <= 0) {
boxiframe.animate({ left: (ss) + "px" }, 700);
boxbuttom.children().eq((Math.abs(ss) / 280)).removeClass("off").addClass("on").siblings().removeClass("on").addClass("off");
}
else //ss<-560,ss>0
{
ss = 0;
boxiframe.animate({ left: (ss) + "px" }, 700);
boxbuttom.children().eq((Math.abs(ss) / 280)).removeClass("off").addClass("on").siblings().removeClass("on").addClass("off");
}
ss -= li_width;
}
showimg();
}
$(document).ready(function () {
boxfun(".frame");
});
</script>
</head>
<body>
<div class="frame">
<div class="iframe">
<ul>
<li><a href="#">
<img src="Wife1.jpg" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" title="img" /></a></li>
<li><a href="#">
<img src="Wife2.jpg" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" title="img" /></a></li>
<li><a href="#">
<img src="Wife3.jpg" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" title="img" /></a></li>
</ul>
</div>
<div class="buttom">
<a href="#">1</a><a href="#">2</a><a href="#">3</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片切换</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
li,ul { list-style: none;margin: 0; padding: 0; }
.frame { width: 280px; height: 280px; position: relative; }
.iframe { overflow:hidden;width: 280px; height: 280px; }
.iframe ul li { float: left;width:280px; }
.button { position: absolute; bottom: 15px; right: 15px; z-index: 300; }
.button li {float: left;cursor: pointer; width: 17px; height: 17px; line-height: 17px; text-align: center; margin-right: 5px; border-radius: 7px; color: #fff; background: #000; }
.button .on { color: #000; background: #fff; }
</style>
<script type="text/javascript">
$(document).ready(function () {
slide(".frame");
});
function slide(cls){
var li=$(cls).find("li").size();//统计多少张图片
$(".iframe ul").width(280*li);//设置宽度，使图片排成一排
var s="<ul class='button'>";//生成li的按钮
for(var i=0;i<li;i++){
s+="<li>"+(i+1)+"</li>";
}
s+="</ul>";
$(s).appendTo($(cls));//生成按钮结束
var _i=0;//当前的编号
$(cls).find(".button li").each(function(i){
//生成按钮点击事件
$(this).click(function(){
_i=i;
$(this).attr("class","on").siblings().removeAttr("class");//设置class，没必要再多加一个off
$(".iframe").animate({scrollLeft:i*280},"slow");//图片移动
});
}).eq(0).click();
function tt(){//定时器函数
_i++;
_i=_i%li;
$(cls).find(".button li").eq(_i).click();//自动点击切换图片
}
var t=setInterval(tt,3000);//定时器
$(cls).hover(function(){
clearInterval(t);//鼠标经过清除定时器，离开时又触发
},function(){
t=setInterval(tt,3000);
})
}
</script>
</head>
<body>
<div class="frame">
<div class="iframe">
<ul>
<li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" width="280" height="280" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" /></a></li>
<li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" width="280" height="280" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" /></a></li>
<li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" width="280" height="280" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" /></a></li>
<li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" width="280" height="280" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" /></a></li>
<li><a href="#"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" width="280" height="280" alt="自个儿写的一个幻灯片，喜欢的可以看一下。做的不好的地方可以指点" /></a></li>
</ul>
</div>
</div>
</body>
</html>
