我目前有這個(gè)jssor滑塊。 我想制作一個(gè)全屏圖像滑塊，但不知道如何修改它: 因?yàn)槲以囍庉媍ss或者它打破了長(zhǎng)寬比，圖像變得不可見(jiàn)。 這是我第一次使用jssor，我們是否修改css或js或inline樣式，使其成為全屏圖像滑塊？
<!DOCTYPE html>
<html>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:helvetica, arial, verdana, sans-serif">
<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com -->
<!-- This code works without jquery library. -->
<script src="js/jssor.slider-21.1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function () {
var jssor_1_SlideoTransitions = [
[{ b: -1, d: 1, o: -1 }, { b: 0, d: 1000, o: 1 }],
[{ b: 1900, d: 2000, x: -379, e: { x: 7 } }],
[{ b: 1900, d: 2000, x: -379, e: { x: 7 } }],
[{ b: -1, d: 1, o: -1, r: 288, sX: 9, sY: 9 }, { b: 1000, d: 900, x: -1400, y: -660, o: 1, r: -288, sX: -9, sY: -9, e: { r: 6 } }, { b: 1900, d: 1600, x: -200, o: -1, e: { x: 16 } }]
];
var jssor_1_options = {
$AutoPlay: true,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*responsive code begin*/
/*you can remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*responsive code end*/
};
</script>
<style>
img {
object-fit: contain;
}
/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div,
.jssorb05 div:hover,
.jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover,
.jssorb05 .av:hover {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn,
.jssorb05 .dn:hover {
background-position: -97px -7px;
}
/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l,
.jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l {
background-position: -10px -31px;
}
.jssora22r {
background-position: -70px -31px;
}
.jssora22l:hover {
background-position: -130px -31px;
}
.jssora22r:hover {
background-position: -190px -31px;
}
.jssora22l.jssora22ldn {
background-position: -250px -31px;
}
.jssora22r.jssora22rdn {
background-position: -310px -31px;
}
.jssora22l.jssora22lds {
background-position: -10px -31px;
opacity: .3;
pointer-events: none;
}
.jssora22r.jssora22rds {
background-position: -70px -31px;
opacity: .3;
pointer-events: none;
}
</style>
<div id="jssor_1"
style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 630px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div
style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div
style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;">
</div>
</div>
<div data-u="slides"
style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 630px; overflow: hidden;">
<div data-p="225.00" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/1.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/2.jpg" />
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/3.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/4.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/5.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/6.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/7.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/8.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="../img/awardp/2020/winners/9.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;"
data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;"
data-autocenter="2"></span>
</div>
<script type="text/javascript">jssor_1_slider_init();</script>
<!-- #endregion Jssor Slider End -->
</body>
</html>但它仍然給我白色背景