网页浏览器
效果
制作网页图片浏览器,实现向前向后翻页、图片缩略图总览、图片缩略图选择、图片翻页过渡效果等功能。
点击后有图片淡入淡出效果。可以点击缩略图来切换展示图片,也可以点击左右按钮切换。
![image-20210929204108381](data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=)
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
| <!DOCTYPE html> <html> <head> <title>图片浏览器</title>
<style type="text/css"> body { text-align:center; }
.thumbnail { display:block; border-bottom:1px solid black; } .thumbnail img { width:100px; height:100px; margin:10px; border:1px solid black; } .click { cursor:pointer; }
input[type="button"] { cursor:pointer; background-color:white;
font-size:70px; height:100px; width:100px; }
#leftButton { float:left; } #img { width:300px; height:300px; margin:10px; border:1px solid black; border:10px solid black;}
#rightButton { float:right; }
</style>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var maxCount = 5; var delay = 500; $(document).ready( function () { for (var i = 0; i < maxCount; i++) { var src = "https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/" + "0" + (i + 1).toString() + ".jpg"; var img = $("<img />").attr("id", (i + 1).toString()).attr("alt", (i + 1).toString()).attr("src", src); $("#thumbnail").append(img); }
$("#thumbnail img").click( function () { $("#img").css("display", "none"); var src = $(this).attr("src"); var alt = $(this).attr("alt"); var nAlt = parseInt(alt); $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay); } ) .mouseover(function () { $(this).addClass("click"); }) .mouseleave(function () { $(this).removeClass("click"); });
$("#leftButton").click( function () { $("#img").css("display", "none"); var alt = $("#img").attr("alt"); if (alt == "1") alt = maxCount + 1; var nAlt = parseInt(alt) - 1; var src = "img/" + "0" + nAlt.toString() + ".jpg"; $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay); }); $("#rightButton").click( function () { $("#img").css("display", "none"); var alt = $("#img").attr("alt"); if (alt == maxCount.toString()) alt = 0; var nAlt = parseInt(alt) + 1; var src = "img/" + "0" + nAlt.toString() + ".jpg"; $("#img").attr("alt", nAlt).attr("src", src).fadeIn(delay); } ); } ); </script> </head>
<body> <div class="thumbnail" id="thumbnail"></div> <input type="button" id="leftButton" value="<=" /> <img id="img" alt="1" src="https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/01.jpg"> <input type="button" id="rightButton" value="=>" /> </body> </html>
|