Question

我在页面加载时在div中插入图像。这是我的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
namespace DanielaS
{
    public partial class ImageDisplay : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string photo = (string)Session["image"];
            Image image = new Image();                        
            image.Attributes.Add("class", "imgOne");
            image.Attributes.Add("runat", "server");
            image.Attributes.Add("id" , "img");
            image.ImageUrl = photo;         
            ImageDiv.Controls.Add(image);
        }

    }
}

我从上一页传递了带有Session的图像url字符串。我的所有图像都在文件夹中，并命名为1.jpg，2.jpg 3.jpg等等。我尝试做的是当我使用Jquery按左或右箭头时更改此图像网址。如果图像显示例如19.jpg当我点击左箭头我想将此图像网址设置为18.jpg并且如果正确单击箭头设置为20.jpg我尝试这样的事情：

<script type="text/ecmascript">
        $(document).ready(function () {
            $(this).keydown(function (e) {

                if (e.keyCode == 37)
                {
                     // var img_src = $("#img").attr("src");
                     //var Newimg_src = img_src name decremented by 1
                     // $("#img").attr("src" , Newimg_src);
                }
                else if (e.keyCode == 39)
                {
                    // var img_src = $("#img").attr("src");
                    //var Newimg_src = img_src name incremented by 1
                   // $("#img").attr("src" , Newimg_src);
                }

            }); 
        });
    </script>

我需要添加If条件以了解imageUrl是否是文件夹中的最后一个。要将下一个设置为1.jpg

Answer 1

我担心你无法使用jQuery计算文件的数量，最好用PHP完成，如下所示：

iterator_count(new DirectoryIterator('/images/'));

但是如果您知道文件夹中已有多少文件，您可以将其提供给变量并使用以下代码：

<script type="text/ecmascript">
    $(document).ready(function () {
        var currentImage=1;
        var maxImage=10; //let's say you only have 10 images in the folder
        $(document).keydown(function (e) {
            if (e.keyCode == 37)
            {
                if(currentImage!=1){
                    var currentImage--;
                    $("#img").attr("src" , 'images/'+currentImage+'.jpg');
                }
                else{
                    var currentImage=10;
                    $("#img").attr("src" , 'images/'+currentImage+'.jpg');
                }
            }
            else if (e.keyCode == 39)
            {
                if(currentImage!=maxImage){
                    var currentImage++;
                    $("#img").attr("src" , 'images/'+currentImage+'.jpg');
                }
                else{
                    var currentImage=1;
                    $("#img").attr("src" , 'images/'+currentImage+'.jpg');
                }
            }
        }); 
    });
</script>

在keydown左右箭头上更改图片网址

1 个答案: