Я сделал очень простую веб-страницу (с пустым телом), которая содержит только слайд-шоу jQuery. Он отлично работает на моем рабочем столе, когда я просто открываю индекс . html. Но когда я копирую все файлы на свой планшет Android и открываю индекс . html в Chrome, я ничего не вижу.
Неужели я приходится делать что-то еще на android устройствах, или Android не может запускать сохраненные страницы?
Это код jQuery, CSS и HTML, который я использовал:
(function($){
$.fn.chocolate = function(args) {
// Default Options
var options = $.extend({
interval : 1000,
speed : 1000
}, args);
return this.each(function() {
var original = $(this);
// Create element
$div = $(document.createElement('div'));
$div.css({
position : 'absolute',
zIndex : 0,
overflow : 'hidden',
});
original.prepend($div);
$div.css(copybackground());
$div.css('background-image', 'url(' + args.images[0] + ')');
// This element background none
original.css('background', 'none');
// Clone bg element
$div2 = $div.clone();
$div.after($div2);
// Set postion
$div.css(copyPosition());
$div2.css(copyPosition());
// Resize window
$(window).resize(function() {
$div.css(copyPosition());
$div2.css(copyPosition());
});
// Copy background style
function copybackground() {
var backgroundProperties = [
'Attachment', 'Color', 'Repeat',
'Position', 'Size', 'Clip', 'Origin'
];
var prop,
copyStyle = {},
i = 0;
for (; i < backgroundProperties.length; i++) {
prop = 'background' + backgroundProperties[i];
copyStyle[prop] = original.css(prop);
}
return copyStyle;
}
// Copy position style
function copyPosition() {
var corners = ['Top', 'Right', 'Bottom', 'Left'];
var i = 0,
position = original.position(),
copyStyle = {
top : position.top,
left : position.left,
width : original.innerWidth(),
height : original.innerHeight()
};
for (; i < corners.length; i++) {
corner = corners[i];
copyStyle['margin' + corner] = original.css('margin' + corner);
copyStyle['border' + corner] = original.css('border' + corner);
}
return copyStyle;
}
var count = 0,
current = 0;
// Change background function
var slide = function() {
if (current == args.images.length - 1) current = 0;
else current++;
if (count == 0) {
$div2.fadeOut(options.speed);
$div.css('background-image', 'url(' + args.images[current] + ')').fadeIn(options.speed);
count++;
} else {
$div.fadeOut(options.speed);
$div2.css('background-image', 'url(' + args.images[current] + ')').fadeIn(options.speed);
count = 0;
}
}
setInterval(function() {slide();}, options.interval);
});
}
})(jQuery);
@charset 'UTF-8';
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background-position: center center;
background-attachment: fixed;
background-repeat: repeat;
background-size: cover;
}
.container {
width: 728px;
padding: 20px;
background-color: rgba(0,0,0,.6);
border-radius: 10px;
position: absolute;
top: 200px;
left: 50%;
margin-left: -384px;
color: #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="jquery.chocolate.js"></script>
<title>slideshow</title>
<script>
$(function() {
$('body').chocolate({
images : ['Slides/1.jpg', 'Slides/2.jpg', 'Slides/3.jpg' ],
interval : 4000,
speed : 2000,
});
});
</script>
</head>
<body>
</body>
</html>