我正在开发的网站本质上是响应式的，即网站设计会根据浏览它的设备进行调整。我为此使用了Bootstrap 框架。
我在我的网站中使用 Jssor JQuery Image slider 。它在所有设备和所有流行的知名浏览器上都运行良好，非常适合我。我面临的唯一问题是在 iPhone 上查看时，Jssor slider 中滑动图像的大小应该更改为尺寸 460 px * 280 px。换句话说，Jssor 图像 slider 看起来应该比当前尺寸大一些。但是在执行此操作时，应保持 slider 中出现的图像的纵横比。
此外，当在 iPhone 上查看网站时，图像 slider 应占据整个水平屏幕。也就是说，图像 slider 不应在 slider 周围出现任何空白区域。当前 slider 两侧出现两个垂直空白条。
最初，当在 PC 或笔记本电脑上的浏览器上查看网站时， slider 图像的分辨率为 940 px * 370 px，它会根据其所在设备的大小自动调整浏览过。
上述尺寸变化应该只发生在 iPhone 而不是任何其他设备上。在其他设备上，它工作得非常好和完美。此外，图像的纵横比不应在此过程中受到干扰。
为了您的引用，我将 slider 的 HTML 代码和 jQuery 代码放在下面。已包含所有必要的库文件。
HTML 代码:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; 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 u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
<div u=caption t="*" class="captionOrange" style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
<div>
<img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
<div u=caption t="*" class="captionOrange" style="position:absolute;left:350px; bottom: 40px; width:300px; height:30px;">
slideshow transition twins
</div>
</div>
</div>
<div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
<style>
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
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;
}
.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(img/a12.png) no-repeat;
overflow: hidden;
}
.jssora12l {
background-position: -16px -37px;
}
.jssora12r {
background-position: -75px -37px;
}
.jssora12l:hover {
background-position: -136px -37px;
}
.jssora12r:hover {
background-position: -195px -37px;
}
.jssora12ldn {
background-position: -256px -37px;
}
.jssora12rdn {
background-position: -315px -37px;
}
.captionOrange, .captionBlack {
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange {
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack {
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover {
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
.bricon {
background: url(img/browser-icons.png);
}
</style>
<span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
<span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>
jQuery 代码:
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];
var options = {
$AutoPlay: 1,
$AutoPlaySteps: 1,
$Idle: 3000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideDuration: 500,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$Cols: 1,
$Align: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 3,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$Steps: 1,
$Rows: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
</script>
最佳答案
//Your website
jQuery(document).ready(function ($) {
//...
function ScaleSliderDevices() {
var bodyWidth = DEVICE.Screen.width();
if (DEVICE.Screen.osDimVariation()) {
bodyWidth = DEVICE.Screen.width() + osWidthOffset();
}
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
};
//...
if (DEVICE.mobile())
{
$(window).bind('resize', ScaleSliderDevices);
}
//as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
ScaleSliderDevices();
}
关于javascript - 如何更改 Jssor Image Slider 的尺寸而不失去其仅在 iPhone 设备上的响应性质、图像纵横比等？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26603675/