问题描述
我已经通过使用jquery.featured.carousel.js文件和一些CSS创建了功能轮播滑块。
这是我的jsfiddle 。
在本地主机中运行这些源代码时，需要在每次调整窗口大小时每次刷新页面以获取响应视图。
这是我的JavaScript：
<script type="text/javascript">
$(document).ready(function() {
initSlider();
});
$( window ).resize(function() {
initSlider();
});
function initSlider()
{
if ($( window ).width() < 1004 && $( window ).width() > 900)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .8,
largeFeatureHeight: .8,
smallFeatureWidth: .3,
smallFeatureHeight: .3,
topPadding: 20,
sidePadding: 30
});
}
else if ($( window ).width() < 900 && $( window ).width() > 768)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .7,
largeFeatureHeight: .7,
smallFeatureWidth: .2,
smallFeatureHeight: .2,
topPadding: 40,
sidePadding: 30
});
}
else if ($( window ).width() < 768 && $( window ).width() > 680)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .577,
largeFeatureHeight: .577,
smallFeatureWidth: .19999,
smallFeatureHeight: .19999,
topPadding: 40,
sidePadding: 30
});
}
else if ($( window ).width() < 680 && $( window ).width() > 580)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .488,
largeFeatureHeight: .488,
smallFeatureWidth: .111,
smallFeatureHeight: .111,
topPadding: 60,
sidePadding: 30
});
}
else if ($( window ).width() < 580 && $( window ).width() > 412)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .388,
largeFeatureHeight: .388,
smallFeatureWidth: .1,
smallFeatureHeight: .1,
topPadding: 70,
sidePadding: 30
});
}
else if ($( window ).width() < 412 && $( window ).width() > 250)
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : .3,
largeFeatureHeight: .3,
smallFeatureWidth: .06,
smallFeatureHeight: .06,
topPadding: 80,
sidePadding: 10
});
}
else
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value,
trackerIndividual:false,
trackerSummation: false,
autoPlay:0,
largeFeatureWidth : 0,
largeFeatureHeight: 0,
smallFeatureWidth: .3,
smallFeatureHeight: .3,
topPadding: 20,
sidePadding: 20
});
}
}
</script>
在上面的代码中，我正在使用：
$( window ).resize(function() {
initSlider();
});
当我删除此代码时，它再次起作用。
注意：对于此轮播响应视图，我不能使用CSS媒体查询。
我可以知道，如何设置宽度或如何修改代码以获取响应视图，而无需每次都刷新页面？
任何想法将不胜感激。
谢谢。
1楼
Robin Carlo Catacutan
0
2015-07-31 06:46:45
首先，应将setTimeout放在resize函数上，以便在调整页面大小时不会在每个像素上调用该函数。
做这样的事情：
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 50);
});
$(window).bind('resizeEnd', function() {
initSlider();
});
同样，我也不认为每次调整轮播大小时都要重新初始化轮播设置。 转盘上应该有一个选项，您可以在其中设置值而不必再次对其进行初始化。 可悲的是，在检查功能转盘时，它没有我所能看到的范围。
我认为可以通过使用css媒体查询来实现它，因为在元素上添加了类，例如centerImage ， imageRight和imageLeft ，您应该可以控制它。