我有一个非常简单的HTM页面,我想要你使用JSSOR Slider,但它只是不工作,我没有看到控制台中的任何错误,当我碰到箭头bottons我的图像也没有改变。为什么?
头
<script type="text/javascript" src="/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Scripts/slider/js/jssor.slider.mini.js"></script>
代码:
<body style="margin: 0px; overflow: hidden; text-decoration: none; border: 0px;">
<div id="slider1_container" name="slider1_container" style="position: relative; top: 0px; left: 0px; width: 676px; height: 375px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
Loading ...
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
<div id="HomeImgSliders"></div>
</div>
<!-- Bullet Navigator Skin Begin -->
<style>
/* jssor slider bullet navigator skin 10 css */
/*
.jssorb10 div (normal)
.jssorb10 div:hover (normal mouseover)
.jssorb10 .av (active)
.jssorb10 .av:hover (active mouseover)
.jssorb10 .dn (mousedown)
*/
.jssorb10 div, .jssorb10 div:hover, .jssorb10 .av
{
background: url(/Scripts/slider/img/b10.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb10 div
{
background-position: -10px -10px;
}
.jssorb10 div:hover, .jssorb10 .av:hover
{
background-position: -40px -10px;
}
.jssorb10 .av
{
background-position: -70px -10px;
}
.jssorb10 .dn, .jssorb10 .dn:hover
{
background-position: -100px -10px;
}
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb10" style="position: absolute; bottom: 16px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 11px; HEIGHT: 11px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 14 css */
/*
.jssora14l (normal)
.jssora14r (normal)
.jssora14l:hover (normal mouseover)
.jssora14r:hover (normal mouseover)
.jssora14ldn (mousedown)
.jssora14rdn (mousedown)
*/
.jssora14l, .jssora14r, .jssora14ldn, .jssora14rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(/Scripts/slider/img/a14.png) no-repeat;
overflow: hidden;
}
.jssora14l
{
background-position: -15px -35px;
}
.jssora14r
{
background-position: -75px -35px;
}
.jssora14l:hover
{
background-position: -135px -35px;
}
.jssora14r:hover
{
background-position: -195px -35px;
}
.jssora14ldn
{
background-position: -255px -35px;
}
.jssora14rdn
{
background-position: -315px -35px;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora14l" style="width: 30px; height: 50px; top: 123px; left: 0px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora14r" style="width: 30px; height: 50px; top: 123px; right: 0px"></span>
</div>
</body>
<script type="text/javascript">
$().ready(function () {
$.get("/api/MyService?lng=en", function (data) {
$.each(data, function (key, value) {
var html = "<div><a href='" + value.Href + "' target='_blank'><img u=image src=" + value.Url + " /></a></div>";
$("#HomeImgSliders").append(html);
});
var imagesLng = data.length;
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true,
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 0, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1
$AutoPlay: true,
$DisplayPieces: imagesLng
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
});
</script>
答案 0 :(得分:1)
请替换
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
<div id="HomeImgSliders"></div>
</div>
与
<!-- Slides Container -->
<div id="HomeImgSliders" u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 676px; height: 375px;">
</div>
并替换
$.each(data, function (key, value) {
var html = "<div><a href='" + value.Href + "' target='_blank'><img u=image src=" + value.Url + " /></a></div>";
$("#HomeImgSliders").append(html);
});
与
$.each(data, function (key, value) {
var html = "<div><a u=image href='" + value.Href + "' target='_blank'><img src=" + value.Url + " /></a></div>";
$("#HomeImgSliders").append(html);
});
答案 1 :(得分:0)
我有同样的问题,但我的问题是方法的调用顺序,我首先在DOM中添加我的图像元素,然后调用JSSOR Load方法。
$.each(dataset, function (i, item) {
var html = "<img data-u='image' class='img img-test' data-url='" + dataset[i] + "'src='" + dataset[i] + "'></img>";
$("#ImageSlider").append(html);
});
JSSOR_Load();// here I called the JSSOR initilization