Javascript 使用JSSOR,尝试创建要从中调用的动态图像数组,但不确定如何启动

Javascript 使用JSSOR,尝试创建要从中调用的动态图像数组,但不确定如何启动,javascript,html,asp.net,jssor,Javascript,Html,Asp.net,Jssor,作为一名新手程序员,我正在尝试创建一个JSSOR滑块,以便从.aspx网页中的图像数组中调用。我熟悉Jquery、JavaScript、Bootstrap、HTML和其他相关的东西,但我不知道如何去做 我的html文档的相关部分: asp:Content ID="Content3" ContentPlaceHolderID="PageBody" runat="server" onLoad ="initiliaze()"> <div style="height:500px; margi

作为一名新手程序员,我正在尝试创建一个JSSOR滑块,以便从.aspx网页中的图像数组中调用。我熟悉Jquery、JavaScript、Bootstrap、HTML和其他相关的东西,但我不知道如何去做

我的html文档的相关部分:

asp:Content ID="Content3" ContentPlaceHolderID="PageBody" runat="server" onLoad ="initiliaze()">
<div style="height:500px; margin:0 auto; display:block;">
    <div align:"center" class="container-fluid">
        <div class="row">
            <div class="col-lg-24 col-lg-offset-5">
            <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px;">
                <div u="slides" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 1000px; height: 480px;">
                    <div> <img u ="image" src='../Resources/Images/NewMEOBannerV3_1050x150.png'/></div>
                    <div><img u ="image" src ="</div>
                    <div> <img u="image" src="http://i.ytimg.com/vi/CINA288fZUs/maxresdefault.jpg" /> </div>
                    <div> <img u="image" src="http://edge.alluremedia.com.au/m/k/2015/06/arkham1.jpg" /> </div>
                    <div> <img u="image" src="http://i.ytimg.com/vi/VpXUIh7rlWI/maxresdefault.jpg" /> </div>
                </div>
                <div u="navigator" class="jssorb01" style="bottom: 0px; right: 0px;">
                    <span u="arrowleft" class="jssora05l" style="top: -250px; left: -450px;"></span>
                    <span u="arrowright" class="jssora05r" style="top: -250px; right: -450px;"></span>
                    <div u="prototype"></div>
                </div>
                </div>
                <div style="line-height:75%;">
                    <br />
                </div>
                <div class="ticker1">
                    <div class="innerWrap">
                        <div class="list"> This is content</div>
                        <div class="list"> This is also content </div>
                        <div class="list"> Still content here...</div>
                        <div class="list"> YES THIS IS CONTENT. </div>
                    </div>
                </div>
            </div>
        </div>
     </div>
</div>
asp:Content ID=“Content3”contentplaceholder ID=“PageBody”runat=“server”onLoad=“initilize()”>

这就是内容 这也是内容 还在满足于这里。。。 是的,这就是内容。


我想将slider div中的图像放入一个数组中,然后稍后调用该数组以整合所有内容并简化后端编辑。

要动态装入jssor slider,可以动态填充html代码,然后初始化jssor slider

<script>

    jQuery(document).ready(function ($) {

        //define image array
        var images = [
            "../img/landscape/01.jpg",
            "../img/landscape/02.jpg",
            "../img/landscape/03.jpg",
            "../img/landscape/04.jpg",
            "../img/landscape/05.jpg",
            "../img/landscape/06.jpg",
            "../img/landscape/07.jpg",
            "../img/landscape/08.jpg"
        ];

        //retrieve the 'slides' container element to fill slides.
        var slidesElement = document.getElementById("slides");

        //fill images dynamically
        for (var i = 0; i < images.length; i++) {
            var slideElement = document.createElement("div");
            var imgElement = document.createElement("img");
            imgElement.setAttribute("u", "image");
            imgElement.src = images[i];
            slideElement.appendChild(imgElement);
            slidesElement.appendChild(slideElement);
        }

        var options = {};

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    });
</script>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px;
    height: 300px;">
    <!-- Slides Container -->
    <div id="slides" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
        <!-- dynamically fill slides here -->
    </div>
</div>

jQuery(文档).ready(函数($){
//定义图像数组
变量图像=[
“./img/landscape/01.jpg”,
“./img/landscape/02.jpg”,
“./img/landscape/03.jpg”,
“./img/landscape/04.jpg”,
“./img/landscape/05.jpg”,
“./img/landscape/06.jpg”,
“./img/landscape/07.jpg”,
“./img/scape/08.jpg”
];
//检索“幻灯片”容器元素以填充幻灯片。
var slidesElement=document.getElementById(“幻灯片”);
//动态填充图像
对于(var i=0;i
您可能知道,aspx页面可以像其他html页面一样包含普通的旧html、css和javascript。考虑到你提到你熟悉所有必需的技术,你能给我们提供一个你在html中实现的示例吗,这样我们可以帮助你找出问题并帮助你使用asp.net部分吗?是的,当然,我会编辑原始文章。我将使用什么语法?你能举个例子吗?我知道这是基本的,但我只是空白