我从 here 下载并实现了原始文件, 但它不播放。
有趣的是，当我使用 pancakeapps 在 Dropbox 上托管我的文件时，它确实有效。在通过 Google 托管时是否有什么东西阻止我使用脚本？
最佳答案
链接
查看此网站:CDNJS
托管 JS。对于响应式幻灯片:http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js
Google 云端硬盘托管:tutorial
来源 ( JSFiddle )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Slider</title>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<style type='text/css'>
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
#wrapper {
float: left;
width: 100%;
margin-bottom: 50px;
}
a {
color: #222;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides2_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.rslides2_nav.next {
left: auto;
right: 0;
}
.rslides3_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("themes.gif") no-repeat left 50%;
width: 38px;
}
.rslides3_nav:active {
opacity: 1.0;
}
.rslides3_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.rslides1_nav:focus,
.rslides2_nav:focus,
.rslides3_nav:focus {
outline: none;
}
.rslides_tabs {
margin-top: 10px;
text-align: center;
}
.rslides_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.rslides_tabs .rslides_here a {
background: #222;
background: rgba(0,0,0, .8);
}
.caption {
position: absolute;
display: block;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
text-align: center;
background: #000;
background: rgba(0,0,0, .8);
color: #fff;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(function () {
// Slideshow 1
$("#slides1").responsiveSlides({
auto: true,
pagination: true,
nav: true,
fade: 500,
});
});
}//]]>
</script>
</head>
<body>
<div id="wrapper">
<div class="rslides_container">
<ul id="slides1" class="rslides">
<li>
<img src="http://responsiveslides.com/1.jpg" alt="" />
<p class="caption">Donec id elit non mi porta gravida at eget metus.</p>
</li>
<li>
<img src="http://responsiveslides.com/2.jpg" alt="" />
<p class="caption">Donec ullamcorper nulla non metus auctor fringilla.</p>
</li>
<li>
<img src="http://responsiveslides.com/3.jpg" alt="" />
<p class="caption">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</li>
</ul>
</div>
</body>
</html>
定制
现在您可以通过编辑脚本和 CSS 轻松自定义:
可用选项(js):
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
关于javascript - 如果我在 Google Drive 上托管我的网站，我该如何使用 responsiveslides.js？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23327649/