使用数据库中的for循环在滑块中显示图像

时间:2019-07-29 05:51:18

标签: mysql node.js express ejs

我有数据,其中包括图像,图像名称,喜欢数和评论数。 例如:have a look at sample image

我正在从数据库中获取这些数据,并尝试使用for循环显示在滑块中。 例如:看看这个网站https://www.hotstar.com/movies

我想做类似的事情。 我正在将express.js用作客户端的后端和ejs模板

代码工作正常,但问题是我想一起滑动3张图像

<span id="slide"> </span>

$(document).ready(function() 
{
slideshow();
function slideshow()
{

                $.ajax({
                url: '/profile/slideshow',
                type: "GET",
                success: function (response) 
                {
                        if( response != "")
                        {
                                var $slideshow= document.getElementById("slide");
                                  $slideshow.innerHTML = "";

                                var currentImage = 0,
                                images = [];
                                for(var i = 0, len = response.length; i < len; i++)
                                {
                                       var post_data = response[i].Posts;
                                       for(var j = 0, len_post = post_data.length; j < len_post; j++)
                                       {
                                        images.push(post_data[j].e_imagepath)
                                       }
                                }

                                function initSlideshow() {  
                                                setImage(0);
                                setInterval(function(){
                                                nextImage();
                                },1000);
                                }

                                function nextImage() {
                                                if(images.length === currentImage + 1){
                                                currentImage = 0;
                                } else {
                                                        currentImage++;
                                }
                                setImage(currentImage);
                                }

                                function setImage(image) {
                                         $('#slide').html('<img src="../public/image/'+images[image]+'" class="rounded-circle user_img">');
                                }

                                window.onload = initSlideshow();


                        }
                        else{
                                alert("data null");
                        }

                },
                error : function(jqXHR, textStatus, errorThrown)
                {
                                                console.log('jqXHR:');
                                                console.log(jqXHR);
                                                console.log('textStatus:');
                                                console.log(textStatus);
                                                console.log('errorThrown:');
                                                console.log(errorThrown);
                                                alert(errorThrown);
                } 
                });
}
})

0 个答案:

没有答案