<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } html{ height:100%; } body{ overflow:hidden; height:100%; background:url(img/bg.jpg) no-repeat; background-size:cover; } #albumout{ position:absolute; 762px; height:573px; left:0; top:0; right:0; bottom:0; margin:auto; overflow:hidden; } #albumout span{ float:left; } #albumout span img{ 250px; height:187px; padding:2px; } #cover{ position:absolute; left:0; top:0; 100%; height:100%; background:rgba(0,0,0,0.5); display:none; } #prev{ 50px; height:100px; position:absolute; top:50%; left:100px; margin-top:-50px; border-radius:10px; box-shadow: rgb(255,255,255) 0px 0px 30px 10px; color:white; font-size:40px; line-height:100px; text-align:center; cursor:pointer; } #next{ 50px; height:100px; position:absolute; top:50%; right:100px; margin-top:-50px; border-radius:10px; box-shadow: rgb(255,255,255) 0px 0px 30px 10px; color:white; font-size:40px; line-height:100px; text-align:center; cursor:pointer; } #albuminner{ display:none; position:relative; margin:10% auto 0; 500px; height:375px; } #showBox{ position:absolute; left:0; top:0; 500px; height:375px; } #albuminner img{ position:absolute; left:0; top:0; 500px; height:375px; } </style> </head> <body> <div id="albumout"> <span><img src="img/main/1.jpg" alt="" /></span> <span><img src="img/main/2.jpg" alt="" /></span> <span><img src="img/main/3.jpg" alt="" /></span> <span><img src="img/main/4.jpg" alt="" /></span> <span><img src="img/main/5.jpg" alt="" /></span> <span><img src="img/main/6.jpg" alt="" /></span> <span><img src="img/main/7.jpg" alt="" /></span> <span><img src="img/main/8.jpg" alt="" /></span> <span><img src="img/main/9.jpg" alt="" /></span> </div> <div id="cover"> <div id="prev"><</div> <div id="next">></div> </div> <div id="albuminner"> <div id="showBox"> <img src="img/show/0/1.jpg" alt="" /> <img src="img/show/0/2.jpg" alt="" /> <img src="img/show/0/3.jpg" alt="" /> <img src="img/show/0/4.jpg" alt="" /> <img src="img/show/0/5.jpg" alt="" /> </div> </div> <script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var flag = true;//控制的是next多次点击 var flag2 = true;//控制的是pre多次点击 $("#albumout>span").click(function(){ var index = $(this).index(); $("#showBox img").each(function(){ $(this).attr("src","img/show/"+index+"/"+($(this).index()+1)+".jpg"); }) $("#cover").fadeIn(500); $("#albuminner").fadeIn(500); }) $("#cover").click(function(){ $(this).fadeOut(500); $("#albuminner").fadeOut(500); }) $("#prev").click(function(e){ var e = e||window.event; e.stopPropagation(); if(flag2) { $("#showBox img").first().stop().animate({"left":"-510"},500,function(){ $("#showBox").append($(this)); $(this).animate({"left":"0"},500); flag2 =true; }); $("#showBox").stop().animate({"left":"240"},500,function(){ $(this).animate({"left":"0"},500); }); flag2 = false; } }) $("#next").click(function(e){ var e = e||window.event; e.stopPropagation(); if(flag) { $("#showBox img").last().stop().animate({"left":"510"},500,function(){ $("#showBox").prepend($(this)); $(this).animate({"left":"0"},500); flag = true; }); $("#showBox").stop().animate({"left":"-240"},500,function(){ $(this).animate({"left":"0"},500); }); flag = false; } }) </script> </body> </html>
效果略有区别:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ 100%; height: 100%; background: url(img/bg.jpg); background-size: cover; } html{ height: 100%; } #ablumouter{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; 702px; height: 516px; overflow: hidden; } #ablumouter span{ 230px; height:172px; float: left; padding: 2px; } #ablumouter span img{ 230px; height: 172px; } #cover{ position: absolute; left: 0; top: 0; 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; } #pre{ position: absolute; left: 100px; top: 50%; margin-top: -50px; font-size: 40px; border-radius: 10px; 50px; height: 100px; text-align: center; color: white; line-height: 100px; box-shadow: rgb(255,255,255) 0px 0px 30px 3px; } #next{ position: absolute; right: 100px; top: 50%; margin-top: -50px; font-size: 40px; border-radius: 10px; 50px; height: 100px; text-align: center; color: white; line-height: 100px; box-shadow: rgb(255,255,255) 0px 0px 30px 3px; } #albuminner{ position: relative; margin:10% auto 0; 500px; height: 375px; display: none; } #showBox{ position: absolute; left: 0; top: 0; 500px; height: 375px; } #albuminner img{ position: absolute; left: 0; top: 0; 500px; height: 375px; } </style> </head> <body> <div id="ablumouter"> <span><img src="img/main/1.jpg" alt="" /></span> <span><img src="img/main/2.jpg" alt="" /></span> <span><img src="img/main/3.jpg" alt="" /></span> <span><img src="img/main/4.jpg" alt="" /></span> <span><img src="img/main/5.jpg" alt="" /></span> <span><img src="img/main/6.jpg" alt="" /></span> <span><img src="img/main/7.jpg" alt="" /></span> <span><img src="img/main/8.jpg" alt="" /></span> <span><img src="img/main/9.jpg" alt="" /></span> </div> <div id="cover"> <span id="pre"><</span> <span id="next">></span> </div> <div id="albuminner"> <div id="showBox"> <img src="img/show/0/1.jpg" alt="" /> <img src="img/show/0/2.jpg" alt="" /> <img src="img/show/0/3.jpg" alt="" /> <img src="img/show/0/4.jpg" alt="" /> <img src="img/show/0/5.jpg" alt="" /> </div> </div> <script src="js/jquery-2.2.1.min.js"></script> <script> var flag = true; $("#ablumouter>span").click(function(){ var index= $(this).index(); $("#showBox img").each(function(){ $(this).attr("src","img/show/"+index+"/"+($(this).index()+1)+".jpg") }) $("#cover").fadeIn(500); $("#albuminner").fadeIn(500); }) $("#cover").click(function(){ $(this).fadeOut(500); $("#albuminner").fadeOut(500); }) $("#next").click(function(e){ var e= e||window.event; e.stopPropagation(); if(flag) { $("#showBox img").last().animate({"left":"510"},500,function(){ $("#showBox").prepend($(this)); $(this).animate({"left":"0"},500) //当图片展开的时候 flag = true; }) $("#showBox").animate({"left":"-260"},500,function(){ $(this).animate({"left":"0"}) }) flag = false; } }) $("#pre").click(function(e){ var e = e|| window.event; e.stopPropagation(); if(flag){ $("#showBox").animate({"left":"-260"},500,function(){ $(this).animate({"left":"0"},500) //当展开的时候 flag = true; }); $("#showBox img").first().animate({"left":"510"},500,function(){ $("#showBox").append($(this)); $(this).animate({"left":"0"},500); }) flag = false; } }) </script> </body> </html>