HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>采用margin-top/left移动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no" /><title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="css1.css" />
</head>
<body>
<div class="z-box">
<ul class="u-box">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
<li><img src="6.jpg" /></li>
</ul>
<span class="z-prev"></span>
<span class="z-next"></span>
<ul class="n-box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script src="js1.js"></script>
</body>
</html>
JS代码：
//
$(function(){ //播放效果 var timer=null;
var index=0;
//移动函数
$(".n-box li").eq(index).css("fontSize","30px");
function sMove(direction){ if(parseInt(direction)>0){
$(".u-box").stop(true,true).animate({marginTop:"0px"},300);
//添加小按钮样式
if(index<=0){
index=$(".n-box li").length-1;
}else{
index--;
}
}else{
//添加小按钮样式
if(index>=$(".u-box li").length-1){
index=0;
}else{
index++;
}
$(".u-box").stop(true,true).animate({marginTop:direction},300,function(){
$(".u-box").css("marginTop","0px");
$(".u-box").append($(".u-box li").eq(0));
});
}
$(".n-box li").eq(index).css("fontSize","30px").siblings().css("fontSize","14px");
} //自动轮播
function autoPlay(direction){
timer=setInterval(function(){
sMove(direction);
},2000);
}; //开启自动轮播
autoPlay("-300px"); //按钮
$(".z-prev").click(function(){
$(".u-box").css("marginTop","-300px");
//alert("1"); 不是很明白
$(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));
//alert("1");
sMove("300px");
}); $(".z-next").click(function(){
sMove("-300px"); }); //鼠标移入
$(".z-prev").mouseover(function(){
//console.log("停止播放！");
clearInterval(timer);
});
$(".z-prev").mouseout(function(){
//console.log("开启自动播放！");
autoPlay("-300px");
});
$(".z-next").mouseover(function(){
//console.log("停止播放！");
clearInterval(timer);
});
$(".z-next").mouseout(function(){
//console.log("开启自动播放！");
autoPlay("-300px");
}); //小按钮点击事件
function smallButtonclick(){
$(".n-box li").each(function(){
$(this).click(function(){
if(index>$(this).index()){
//console.log("$(this).index()="+$(this).index()+"/"+"index="+index);
var j=index-$(this).index();
for(var i=0;i<j;i++){
$(".u-box").css("marginTop","-300px");
$(".u-box li").eq($(".u-box li").length-1).insertBefore($(".u-box li").eq(0));
sMove("300px");
}
}else{
var j=$(this).index()-index;
for(var i=0;i<j;i++){
sMove("-300px");
}
}
});
});
} //小按钮移入
function onSmallButton(){
$(".n-box").mouseover(function(){
clearInterval(timer);
});
$(".n-box").mouseout(function(){
autoPlay("-300px");
});
}
onSmallButton();
smallButtonclick(); });
CSS代码：
@charset "utf-8";
*{
margin:0px;
padding:0px;
}
list{
list-style:none;
}
.z-box{
width:600px;
height:300px;
position:relative;
margin:0px auto;
overflow:hidden;
}
.u-box{
width:600px;
height:900px;
/*position:absolute;*/
left:0px;
z-index:;
}
.u-box li{
float:left;
list-style:none;
margin-top:0px;
}
.z-prev{
display:block;
width:20px;
height:20px;
position:absolute;
top:45%;
left:10px;
box-shadow:0px 0px 5px yellow;
z-index:;
cursor:pointer;
}
.z-next{
display:block;
width:20px;
height:20px;
position:absolute;
top:45%;
right:10px;
box-shadow:0px 0px 5px yellow;
z-index:;
cursor:pointer;
}
.n-box{
width:100%;
height:40px;
line-height:40px;
text-align:center;
position:absolute;
z-index:;
bottom:20px;
}
.n-box li{
display:inline;
box-shadow:0px 0px 5px white;
padding:2px 8px;
cursor:pointer;
}
纯属个人练习效果 效果都是凑出来 望批评指教！