Javascript 使用JSSOR,尝试创建要从中调用的动态图像数组,但不确定如何启动
作为一名新手程序员,我正在尝试创建一个JSSOR滑块,以便从.aspx网页中的图像数组中调用。我熟悉Jquery、JavaScript、Bootstrap、HTML和其他相关的东西,但我不知道如何去做 我的html文档的相关部分: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
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部分吗?是的,当然,我会编辑原始文章。我将使用什么语法?你能举个例子吗?我知道这是基本的,但我只是空白