<html> <head> <title>轮播</title> <style> *{ margin:0; padding:0; list-style:none; } #dingwei{ position:absolute; width:300px; height:300px; left:300px; top:100px; overflow: hidden; } #dingwei ul{ width: 300px; height:300px; } #dingwei ul li{ display:inline; float:left; position:absolute; } #dingwei ul img{ width:300px; height:300px; } #dingwei>span{ position:absolute; z-index:99; width:10%; height:40px; font-size:50px; top:40%; line-height:100%; text-align:center; cursor:pointer; display:none; } #right{ left:90%; } </style> <script src="jquery-3.1.1.min.js"> </script> </head> <body> <div id="dingwei"> <span id="left"><</span> <span id="right">></span> <ul id="pics"> <li style="z-index:4"><a><img src="1.jpg"/></a></li> <li style="z-index:3"><a><img src="2.jpg"/></a></li> <li style="z-index:2"><a><img src="3.jpg"/></a></li> <li style="z-index:1"><a><img src="4.jpg"/></a></li> </ul> </div> <script> $(document).ready(function(){ $("#dingwei").mouseover(function(){ $("#dingwei span").css("display","block"); }); $("#dingwei").mouseout(function(){ $("#dingwei span").css("display","none"); }); $("#right").click(function(){ var last=$("#pics li").last(); $(last).css({"left":-($("#pics img").width()),"z-index":"5"}); $(last).animate({left:0},function(){ $("#pics li").each(function(){ $(this).css("z-index",parseInt($(this).css("z-index"))-1); }); $("#pics li").first().before($(last)); }); }); $("#left").click(function(){ var first=$("#pics li").first(); $(first).animate({left:-$(first).find("img").width()},function(){ var d="#pics li:not(:eq("+$("#pics li").index($(first))+"))"; $(d).each(function(){ var zindex=parseInt($(this).css("z-index")); $(this).css("z-index",zindex+1); }); $("#pics").append($(first).detach().css({"z-index":"1","left":"0"})); }); }); }); </script> </body> </html>