<div id="content"><div id="button"><ul><li>小图</li><li>中图</li><li>大图</li></ul></div><div id="image"></div></div><script type="text/javascript">$(function () {//把图片写入htmvar imgArr = "";for (var i = 1; i <= 25; i++) {if (i <= 25) {//因上传到17素材超过规定大小，不得不将过多的图片略去，为了达到更好的效果，可以自行修改此循环代码，并且增加其余图片，体验异步加载
                    imgArr += '<img class="scrollLoading" data-url="image/' + i + '.jpg" src="data:image/grey.gif" />';} else {imgArr += '<img class="scrollLoading" data-url="image/13.jpg" src="data:image/grey.gif" />';  //超过26张后显示的图片
                }}$("#image").append(imgArr);$("img").load(function () {//图片默认隐藏
                $(this).hide();//使用fadeIn特效
                $(this).stop().fadeIn("5000");});// 异步加载图片，实现逐屏加载图片
            $(".scrollLoading").scrollLoading();////以下代码为效果代码，非异步加载核心//设置页面最外层容器的最小高度为屏幕的高度
            $("#content").css({ "min-height": $(window).height() });$("#button li:first-child").addClass("li_hover");var index_button = 0;$("#button").on("click", "ul li", function () {index_button = $(this).index();$("#button li").removeClass("li_hover");$(this).addClass("li_hover");if (index_button == 0) {//效果一
                    $("img").stop().animate({ "width": "225px", "height": "132px" }, 600);} else if (index_button == 1) {//效果二
                    $("img").stop().animate({ "width": "500px", "height": "294px" }, 600);} else {//效果三
                    $("img").stop().animate({ "width": "1050px", "height": "618px" }, 600);}});$("#button li").hover(function () {$(this).addClass("li_hover");}, function () {if (index_button != $(this).index()) {$(this).removeClass("li_hover");}});});</script>