要按顺序显示的图像
Images to be displayed in sequence order
我创建了一个滑块,但我的逻辑有些错误。我能够显示所有图像,但不能按顺序显示。所以最初是图像 1 在该图像 2 之后。在我的逻辑中,顺序出了问题。当我们进入浏览器时,图像应该加载,加载需要一些时间。
这是现场演示链接:
http://codebins.com/bin/4ldqp9c/2#
.HTML
<div id="panel">
<div id="title">
</div>
<img id="imageSlide" alt="" src="" width="250px"/>
<div id="desc">
</div>
</div>
.JS
$(function() {
//Local XML Data
var slideXML = "<rss version='2.0'><channel>";
slideXML += "<title>IMAGES</title>";
slideXML += "<images>";
slideXML += "<image>";
slideXML += "<title>Image 1</title>";
slideXML += "<url>http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg</url>";
slideXML += "<desc>Description For Image 1</desc>";
slideXML += "</image>";
slideXML += "<image>";
slideXML += "<title>Image 2</title>";
slideXML += "<url>http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg</url>";
slideXML += "<desc>Description For Image 2</desc>";
slideXML += "</image>";
slideXML += "<image>";
slideXML += "<title>Image 3</title>";
slideXML += "<url>http://www.behok.ru/i/a/cat/gerbera.jpg</url>";
slideXML += "<desc>Description For Image 3</desc>";
slideXML += "</image>";
slideXML += "<image>";
slideXML += "<title>Image 4</title>";
slideXML += "<url>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</url>";
slideXML += "<desc>Description For Image 4</desc>";
slideXML += "</image>";
slideXML += "<image>";
slideXML += "<title>Image 5</title>";
slideXML += "<url>http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg</url>";
slideXML += "<desc>Description For Image 5</desc>";
slideXML += "</image>";
slideXML += "<image>";
slideXML += "<title>Image 6</title>";
slideXML += "<url>http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg</url>";
slideXML += "<desc>Description For Image 6</desc>";
slideXML += "</image>";
slideXML += "</images>";
slideXML += "</channel></rss>";
//Parse XML content
var xmlDoc = $.parseXML(slideXML);
var $xmldata = $(xmlDoc);
//Find Total No of Image
var maximages = ($xmldata.find("images").find("image").length);
$(function() {
//FadeIn/FadeOut Image on Set Time Interval on Slide
setInterval(Slider, 2500);
});
var prevIndex = 0;
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
var shuffleIndex = Math.round((Math.random() * (maximages - 1)));
if (prevIndex == shuffleIndex) {
if (prevIndex >= (maximages - 1)) {
shuffleIndex--;
} else {
shuffleIndex++;
}
}
prevIndex = shuffleIndex;
$("#panel").fadeIn("slow").css('background', '#000');
var title = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("title").text();
$("#title").text(title).fadeIn("slow");
var imgurl = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("url").text();
$(this).attr('src', imgurl).fadeIn("slow");
var desc = $xmldata.find("images").find("image:eq(" + shuffleIndex + ")").find("desc").text();
$("#desc").text(desc).fadeIn("slow");
});
}
});
这个 http://codebins.com/bin/4ldqp9c/23?
if ( prevIndex < maximages ){
shuffleIndex = prevIndex;
prevIndex++;
}
else {
prevIndex=0;
shuffleIndex=prevIndex;
prevIndex++;
}
这可能是一个顺序:
var i = 0;
function Slider() {
$('#imageSlide').fadeOut("slow", function() {
if(i == maximages) i = 0;
$("#panel").fadeIn("slow").css('background', '#000');
var title = $xmldata.find("images").find("image:eq(" + i + ")").find("title").text();
$("#title").text(title).fadeIn("slow");
var imgurl = $xmldata.find("images").find("image:eq(" + i + ")").find("url").text();
$(this).attr('src', imgurl).fadeIn("slow");
var desc = $xmldata.find("images").find("image:eq(" + i + ")").find("desc").text();
$("#desc").text(desc).fadeIn("slow");
i++;
});
}
相关文章:
- 非常大的图像显示渐进
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- JS照片库.使大图像显示和缩略图可单击
- 多个图像显示带有动态创建的画布的最后一个图像并分配给图像
- 当我在jquery/javascript中单击按钮时加载图像显示
- React图像显示
- 随机图像显示,无重复,使用Javascript
- 将跨度内容(图像url)转换为图像(显示)
- 随机图像显示不止一次
- 节点.js 使用 Multer 上传图像显示未定义
- 范围滑块,用于更改轨道上方对齐圆的直径并使对齐的图像显示在下方
- 使用图像显示和隐藏
- 使用 JavaScript 将文件夹中的图库图像显示到网页中
- 画布到图像显示为无图像(空白)
- 传单不会将本地图像显示为叠加
- 切换此元素时,如何使不同的图像显示,而不是文本
- 在页面加载时将图像显示为弹出窗口
- 如何在模糊浏览器主窗口时将图像显示为叠加层
- iOS在画布上绘制图像显示:无会导致内存泄漏
- JavaScript 图像显示不起作用