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:660; } .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:661; cursor:pointer; } .z-next{ display:block; width:20px; height:20px; position:absolute; top:45%; right:10px; box-shadow:0px 0px 5px yellow; z-index:661; cursor:pointer; } .n-box{ width:100%; height:40px; line-height:40px; text-align:center; position:absolute; z-index:601; bottom:20px; } .n-box li{ display:inline; box-shadow:0px 0px 5px white; padding:2px 8px; cursor:pointer; }
纯属个人练习效果 效果都是凑出来 望批评指教！