html+css实现京东换图片

来源：互联网发布：大气层消失知乎编辑：程序博客网时间：2024/05/29 18:37
<strong><!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style type="text/css">*{margin:0px; padding:0px;}.ad{margin:120px auto;width:520px;height:280px; background:#f00;position:relative;overflow:hidden;}.pic{width:520px ;height:280px;/*border:1px solid #000*/}.pic ul{width:26000px ;height:280px;top:0px;left:-520px;position:absolute;}.pic ul li{list-style-type:none;width:520px ;height:280px;/*border:1px solid #ffff00;*/float:left;}.left,.right{width:40px;height:40px;background:rgba(167,167,167,0.5);color:#fff;font-size:28px;text-align:center;line-height:40px;top:120px;cursor:pointer;position:absolute;}.left:hover,.right:hover{background:rgba(167,167,167,0.8)}.left{left:5px;}.right{right:5px;}  </style> </head> <body><div class="ad"><div class="pic"><ul><li><img src="img/5.jpg"/></li><li><img src="img/1.png"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li><li><img src="img/1.png"/></li></ul></div><div class="left"><</div><div class="right">></div></div><script src="js/jquery.js"></script><script>var a= 1;var Time = new Date();$(".right").click(function(){if((new Date()-Time)>1000){Time = new Date();//alert(Time);a=a+1;var lef = -a*520 +"px";//$(".pic ul").animate({left:"-520px"},1000);$(".pic ul").animate({left:lef},1000,function(){if(a==6){$(".pic ul").css("left","-520px");a=1;}});}});$(".left").click(function(){if((new Date()-Time)>1000){Time = new Date();a=a-1;var lef =-a*520 +"px";//$(".pic ul").animate({left:"-520px"},1000);$(".pic ul").animate({left:lef},1000,function(){if(a==0){$(".pic ul").css("left","-2600px");a=5;}});}});</script> </body></html></strong>
0 0