Javascript 如何在HTML代码中实现新的JQuery？_Javascript_Jquery_Html_Css

Javascript 如何在HTML代码中实现新的JQuery？

javascript jquery html css

Javascript 如何在HTML代码中实现新的JQuery？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,此时，我正在使用JQuery为我的图像数组进行预加载。在我看到图像（幻灯片）之前，我看到了一个JQuery效果的屏幕，它加载了图像，然后逐渐消失，我看到了幻灯片我想做的是使用另一个JQuery，但这次没有屏幕预加载图像，而是：加载第一个图像以在幻灯片中显示/显示第一个图像，但还没有按钮要在第一个图像上显示/dsiplay，jquery是一个微调器预加载程序，它应该加载带有百分比的图像，当它完成所有其余图像的加载后，开始幻灯片放映这是我现在的html代码： <!DOCTYPE ht

此时，我正在使用JQuery为我的图像数组进行预加载。在我看到图像（幻灯片）之前，我看到了一个JQuery效果的屏幕，它加载了图像，然后逐渐消失，我看到了幻灯片

我想做的是使用另一个JQuery，但这次没有屏幕预加载图像，而是：

加载第一个图像以在幻灯片中显示/显示第一个图像，但还没有按钮

要在第一个图像上显示/dsiplay，jquery是一个微调器预加载程序，它应该加载带有百分比的图像，当它完成所有其余图像的加载后，开始幻灯片放映

这是我现在的html代码：

<!DOCTYPE html>
<html lang="en">


<meta
    name="viewport"
    content="width=device-width, height=device-height, initial-scale=1.0"
/>

<link
    type="text/css"
    rel="stylesheet"
    href="Screen.css"
    media="screen,projection,tv"
/>
<style>
#preloader { width: 100%; height: 900px; background:#000; position:fixed; left:0; top:0; text-align: center; z-index:9999999999;}
#loadingbar { width: 245px; height: 245px; text-align: center; color: #fff; background: url(../img/preload_bg.gif) no-repeat 0 245px; margin-left: 38%; margin-top: 11%;}
#loadingtext { 

padding: 10px 0 0; 

font-size:18px;


}
</style>

<title>
    Slidehow Demo -  - Site Title
</title>


<link rel="stylesheet" href="css/preloader.html" type="text/css" />

</head><body>

    <div id="preloader">
  <div id="loadingbar"><img src="http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif" width="345" height="245" alt="Preload Logo" /></div>
                    <div id="loadingtext"  style="color:#FFF;" ></div>
</div>
    <div id="slideShow">



    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002409.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003136.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar005721.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002203.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002202.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000010.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif" alt="slide" />
    <img src="http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif" alt="slide" />            



    <!-- #slideShow --></div>

    <script type="text/javascript" src="SlideShow.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="script/lib/jquery-1.8.2.min.js"><\/script>')</script> 
    <script type="text/javascript">
(function($) {

    var imgList = [];

    $.extend({

        preload: function(imgArr, option) {

            var setting = $.extend({

                init: function(loaded, total) {},

                loaded: function(img, loaded, total) {},

                loaded_all: function(loaded, total) {}

            }, option);

            var total = imgArr.length;

            var loaded = 0;



            setting.init(0, total);

            for(var i in imgArr) {

                imgList.push($("<img />")

                    .attr("src", imgArr[i])

                    .load(function() {

                        loaded++;

                        setting.loaded(this, loaded, total);

                        if(loaded == total) {

                            setting.loaded_all(loaded, total);

                        }

                    })

                );

            }



        }

    });

})(jQuery);





$(function() {
    $.preload([
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002409.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007339.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005712.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007337.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000009.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000007.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005720.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar007338.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003137.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003136.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000005.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar005721.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002203.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar002202.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000010.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar003138.Gif",
        "http://newsxpressmedia.com/files/radar-simulation-files/radar000006.Gif",





        ], {

        init: function(loaded, total) {

            $(".wrapper").hide();

            $("#loadingtext").html("L o a d i n g ... p l e a s e   w a i t");

        },

        loaded: function(img, loaded, total) {

            var loader = 245-((loaded/total)*245);

            var prozent = Math.round(loaded/total*100);

            $("#loadingtext").html("L o a d i n g : "+prozent+"%");

            //$("#loadingtext").html("Lade jede Menge Inhalte: "+loaded+"/"+total);

            $("#loadingbar").css({"background-position" : "0px "+loader+"px"});

        },

        loaded_all: function(loaded, total) {
            $("#loadingtext").html("L o a d e d");
            $("#preloader").delay(500).fadeOut();
            $(".wrapper").delay(1000).fadeIn("slow");
        }

    });



});


</script>

</body>
</html>


#预加载程序{宽度：100%；高度：900px；背景：#000；位置：固定；左侧：0；顶部：0；文本对齐：中心；z索引：9999999；}
#加载栏{宽度：245px；高度：245px；文本对齐：中心；颜色：#fff；背景：url（../img/preload_bg.gif）不重复0 245px；左边距：38%；顶部距：11%；}
#加载文本{
填充：10px0；
字号：18px；
}
幻灯片演示--站点标题
window.jQuery | | document.write（“”）
（函数（$）{
var-imgList=[]；
$扩展({
预加载：功能（imgArr，选项）{
var设置=$.extend({
init:函数（已加载，总计）{}，
已加载：函数（img，loaded，total）{}，
loaded_all:函数（loaded，total）{
}，选择权）；
var total=imgArr.length；
var=0；
设置.init（0，总计）；
用于（imgArr中的var i）{
imgList.push（美元）

然后我有另外两个文件，一个是javascript，另一个是样式（css）。文件名为：SlideShow.js和Screen.css

这是我的网站，因为它现在与jquery：

问题是如何实现我想在本例中使用的新JQuery：

bitbucket.org/Better2Web/jquery.percentageloader

这是我现在想要使用的jquery的链接：以及jquery演示的链接：你是在问如何包含第二个脚本吗？是的，但是已经存在了一个。不是两个jquery脚本，而是要替换html代码中的一个。让它像我在1.a中写的那样工作nd 2.首先加载/显示幻灯片中的第一个图像显示第一个图像，但不启动幻灯片，也不显示按钮。加载完所有图像后，用jquery加载其余图像，然后启动幻灯片并显示按钮。再次，用此脚本替换现有的jquery脚本，不使预览屏幕变为but正如我在1和2中所写的。谢谢你，安迪。我想在预加载中使用的新jquery是在第一个加载的图像的中心显示/显示，加载所有其余的图像，然后显示按钮并开始幻灯片放映。