我目前正在该网站http://run-journey.com/上工作。 我在智能手机首页上的背景中放置了一个滑块。在执行诸如调整大小或滚动之类的操作之前,它似乎工作正常:滑块图像未显示到看上去有些毛刺的程度。在PC上调整窗口大小并在智能手机上滚动时,都会发生这种情况。
我已经检查了这个js文件,但我不知道是什么原因造成的。
这是滑块的html部分。
<div class="vid_inner">
//some codes here
</div>
这是js代码。
(function($) {
// defaults
$.fn.fullClip = function(options) {
var settings = $.extend({
current: 0,
images: [],
transitionTime: 1000,
wait: 3000,
static: false
}, options);
// preload images
var i, end;
for (i = 0, end = settings.images.length; i < end; ++i) {
new Image().src = settings.images[i];
}
// sort out the transitions + specify vendor prefixes
$('.vid_inner')
.css('background', 'url(' + settings.images[settings.current] + ')')
.css('-webkit-transition', + settings.transitionTime + 'ms ease-in-out')
.css('-moz-transition', + settings.transitionTime + 'ms ease-in-out')
.css('-ms-transition', + settings.transitionTime + 'ms ease-in-out')
.css('-o-transition', + settings.transitionTime + 'ms ease-in-out')
.css('transition', + settings.transitionTime + 'ms ease-in-out')
// if only one image, set as static background
if (settings.static) {
$(this)
.css('background', 'url(' + settings.images[settings.current] + ')');
return;
}
// change the background image
(function update() {
settings.current = (settings.current + 1) % settings.images.length;
$('.vid_inner').css('background', 'url(' + settings.images[settings.current] + ')');
setTimeout(update, settings.wait);
}());
}}(jQuery));
onResize = function() {
if($(window).width() < 1025) {
$('.vid_inner').removeClass('topbg_none');
$('.vid_inner').fullClip({
images: ['sliderimg/slider1_top.jpg', '/sliderimg/slider2_top.jpg', '/sliderimg/slider3_top.jpg'],
transitionTime: 1500,
wait: 10000
});
} else {
$('.vid_inner').addClass('topbg_none');
}
};
$(document).ready(onResize);
$(window).resize(onResize);