更改 keydown 左右箭头上的图像 url答案

【问题标题】：change image url on keydown left and right arrow更改 keydown 左右箭头上的图像 url
【发布时间】：2014-08-06 17:53:28
【问题描述】：

页面加载时，我在 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 按下左箭头或右箭头时更改此图像 url。因此，如果图像显示例如 19.jpg 当我点击左箭头时，我想将此图像 url 设置为 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

【问题讨论】：

标签： c# javascript jquery html

【解决方案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>

【讨论】：