我如何...动态显示文件夹中的图像 [英] How do i...dynamically display image from the folder

问题描述

How do I...dynamically display image from the folder using java script or jQuery and display on the web page in a swapping way

我尝试过：



< script type = text / javascript>

var picPaths = ['images / banner / img1.jpg'，'images / banner / img2.jpg'，'images / banner / img3.jpg'，' images / banner / img4.jpg'，'images / banner / img5.jpg'，'images / banner / img6.jpg'，'images / banner / img7.jpg'，'images / banner / img8.jpg'];

var curPic = -1;

//预加载图像以获得流畅的动画

var imgO = new Array（）;

for（i = 0; i< picPaths.length; i ++）{

imgO [i] = new Image（）;

imgO [i] .src = picPaths [i];

} < br $> b $ b

函数swapImage（）{

curPic =（++ curPic> picPaths.length - 1）？ 0：curPic;

imgCont.src = imgO [curPic] .src;

setTimeout（swapImage，2000）;

}



window.onload = function（）{

imgCont = document.getElementById（'imgBanner'）;

swapImage（ ）;

}

< / script>

What I have tried:

<script type="text/javascript">
var picPaths = ['images/banner/img1.jpg', 'images/banner/img2.jpg', 'images/banner/img3.jpg', 'images/banner/img4.jpg', 'images/banner/img5.jpg', 'images/banner/img6.jpg', 'images/banner/img7.jpg', 'images/banner/img8.jpg'];
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for (i = 0; i < picPaths.length; i++) {
imgO[i] = new Image();
imgO[i].src = picPaths[i];
}

function swapImage() {
curPic = (++curPic > picPaths.length - 1) ? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage, 2000);
}

window.onload = function () {
imgCont = document.getElementById('imgBanner');
swapImage();
}
</script>

推荐答案

您是否尝试过查看jQuery轮播？看看这个带有计时器的旋转木马来滑动新图像。 使用HTML CSS jQuery的带有计时器和标题的代码片段轮播| Bootsnipp.com [ ^ ]



然后你可以使用jQuery AJAX将动态图像加载到插件中。

Have you tried looking in to jQuery carousel? Take a look at this carousel with a timer to slide new image. Code Snippet Carousel with Timer and Caption using HTML CSS jQuery | Bootsnipp.com[^]

You could then use jQuery AJAX to load dynamic image into the plugin.

这篇关于我如何...动态显示文件夹中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！