jQuery实现查看图片功能

2023-07-10 11:20:03 342

html,body{ padding:0; margin:0; } .slimg{ width:300px; } .gd{ background-color:rgba(0,0,0,0.7); position:absolute; z-index:900; display:none; top:0; left:0; } .sl{ position:absolute; z-index:888; display:flex; flex-wrap:wrap; justify-content:center; } .sl>img{ width:25%; } .yt{ z-index:990; position:absolute; display:none; left:500px; top:200px; } .tp{ margin:020px; } .yt>div{ display:inline-block; } .left, .right{ position:relative; top:-110px; cursor:pointer; } .ss{ position:relative; width:50px; height:50px; left:270px; } .start{ z-index:990; position:absolute; }

varmax=$(".slimg").length; $(function(e){ varwidth=$(window).width(); varheight=$(window).height(); $(".gd").css({ "height":height, "width":width }); //左翻按钮动画 $(".left").hover( function(){ $(this).animate({ "left":"-10" }); }, function(){ $(this).animate({ "left":"0" }); } ); //右翻按钮动画 $(".right").hover( function(){ $(this).animate({ "right":"-10" }); }, function(){ $(this).animate({ "right":"0" }); } ); //被点击的缩略图 $(".sl>img").click(function(e){ $(".gd").show(500); $(".yt").fadeIn(800); varindex=$(this).index();//当前被点击图片的索引 $(".tp>img").attr("src","images/"+(index+1)+".jpg"); //左翻 $(".left").click(function(e){ if(index-1<0){ index=max-1; }else{ index=index-1; } $(".tp>img").attr("src","images/"+(index+1)+".jpg"); }); //右翻 $(".right").click(function(e){ if(index==max-1){ index=0; }else{ index=index+1; } $(".tp>img").attr("src","images/"+(index+1)+".jpg"); }); //隐藏和显示播放按钮 $(".tp").hover( function(){ $(".ss").fadeIn(500); $(this).animate({ "opacity":"0.7" },700); }, function(){ $(".ss").fadeOut(500); $(this).animate({ "opacity":"1" },700); } ); //点击开始播放再次点击结束播放 letflag=true; $(".start").click(function(){ if(flag==true){ time=setInterval(function(){ if(index==max-1){ index=0; }else{ index=index+1; } $(".tp>img").attr("src","images/"+(index+1)+".jpg"); },2000); flag=false; $(".start").attr("src","images/stop.png"); }else{ clearInterval(time); flag=true; $(".start").attr("src","https://www.haoziyuan.ccimages/start.png"); } }); leth=$(".tp>img").height(); $(".ss").css({ "top":-h/2-25 }); //隐藏关灯效果 $(".gd").click(function(){ $(".gd").hide(800); $(".yt").fadeOut(500); }); }); });

jQuery实现查看图片功能

热门推荐

随机推荐