页面加载时带有标题的随机图像
Random images with caption on pageload
我有一个工作代码,用于使用数组在页面加载时加载随机图像。如何为其添加字幕?哪种方法是:我应该使用另一个数组来存储字幕还是?任何建议表示赞赏!
我的代码是:
<script type="text/javascript">
var images=new Array(); // regular array (add an optional integer
images[0]="https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg";
images[1]="https://s-media-cache-ak0.pinimg.com/736x/e6/41/74/e64174e355f78a0f07e951bcec62ca96.jpg";
images[2]="https://media.giphy.com/media/3o7abHrsGbV10rCeze/giphy.gif";
images[3]="https://media.giphy.com/media/Bbt5FxRiArl3a/giphy.gif";
images[4]="http://2ca54c85d3f608494402-1c6b4b69d2498d95ab6e291a3fb28b64.r36.cf1.rackcdn.com/16/1/large.jpg";
// Preload
$(images).each(function(){
$("<img/>")[0].src = this;
});
// Random index
var randomNumber = Math.floor( Math.random() * images.length );
// Call backstretch the first time
$.backstretch(images[randomNumber], {duration: 30000, fade: 1200});
// Change images after that with setInterval
setInterval(function() {
index = Math.floor( Math.random() * images.length );
$.backstretch(images[index], {duration: 30000, fade: 1200});
}, 30000);
</script>
我会使用 1 个数组(对象)来保持更好的组织。
因此,您的数组项将如下所示:
images[0] = {url : "https://s-media-cache-ak0.pinimg.com/736x/a5/47/45/a5474577f4a4ae93c85db719d0cbafd4.jpg", caption : "awesome image"};
然后,您可以使用相同的计算索引设置图像和标题。
创建一个更新图像和标题的函数,并使用 sentInterval 调用它。这样你的代码会更干净。因此,例如:
声明你的函数:
function setRandomImage(imgs) {
var index = Math.floor(Math.random() * imgs.length);
$.backstretch(imgs[index].url);
$("#caption").html(imgs[index].caption);
}
声明您的数组:
var images = new Array();
images[0] = {url : "http://blah0.jpg"};
images[1] = {url : "http://blah1.jpg"};
images[2] = {url : "http://blah2.jpg"};
每 3 秒在数组上调用一次函数:
setInterval(setRandomImage, 3000, images);
相关文章:
- CSS-如何定位内容数据标题
- 在PHP中使用javascript更改页面标题'if'
- Brightcove获取/显示HTML中的当前视频标题和描述
- React组件-设置页面标题
- jQuery动态更改标题
- HighCharts长标题文本在某些元素上重叠
- $(document).height()在刷新时随机化值(Safari 5.1.10)
- 使用当前日期生成随机id
- 将行添加到具有固定标题的HTML表中
- CKEditor v4:自制插件中对话框的动态标题
- 如何在自动完成时设置属性标题
- 从a-z中随机选择一个字母
- 单元格的工具提示或标题不显示超过2000个字符
- 如何从相应的控制器动态更新标题和描述
- 页面加载时带有标题的随机图像
- 加载随机背景音乐并显示标题
- 需要将随机图像(在刷新/重新加载的页面上)放置在Wordpress标题横幅上
- 随机化标题图像与Post链接同步在Ghost.JS上
- 无法在页面加载时将标题更改为随机颜色
- 使用Javascript从文本文件加载随机标题并通过HTML显示