Change image dynamically

You need to just change the assigned value. More details -> better answers.

So the requirement is in card layout i need to display image and text.

Eg: Image1 and text1 needs to be displayed first then it should change to Image2 and text2 then to Image3 and text3 then to Image4 and text4 and finally it should show image1 and text1 and the cycle continues.

Note text is short description about image eg: if the image is of Apple then text is Apple.

Should this happen automatically or triggered by a user interaction? If automatically, what is your use case?

It should be Triggered by user interaction. Eg: if i hover my cursor on that card layout then it should change

There's currently no functionality that would allow you to perform a save action (or any other manual variable update) just via hover-over.  The user would need to click something.

ohk mike ..Is it possible if user clicks on that card and then it will change

It would also be helpful to get a lot more information about why you're hoping to do this, because there may be other similar functionality in Appian that could still achieve your goal in a different way.

you can create a constant which is of multiple type and in that you can add your image document and in interface you can refer this constant to change the image of icon click. on icon, you have to change the index to get the next and previous image.

Hope the below code works for your requirement. This code also changes the image randomly on every 30 seconds without user interaction.

a!localVariables(
  local!images: {
    "BOOK",
    "BUILDING",
    "BRIEFCASE",
    "AIRPLANE"
  },
  local!index: a!refreshVariable(
    value: charat(rand(1), 3),
    refreshInterval: 0.5
  ),
  local!selectedImage: local!images[if(local!index > 4, 1, local!index)],
  a!cardLayout(
    contents: {
      a!billboardLayout(
        backgroundMedia: a!documentImage(
          document: a!iconNewsEvent(icon: local!selectedImage)
        ),
        backgroundColor: "#f0f0f0",
        marginBelow: "NONE",
        overlay: a!barOverlay(
          contents: {
            a!imageField(
              align: "CENTER",
              images: {
                a!forEach(
                  items: local!images,
                  expression: a!documentImage(
                    document: if(
                      local!selectedImage = fv!item,
                      a!iconIndicator("HARVEY_100"),
                      a!iconIndicator("HARVEY_0")
                    ),
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!selectedImage,
                          local!images[fv!index]
                        )
                      }
                    )
                  )
                )
              },
              size: "ICON"
            )
          }
        )
      )
    }
  )
)

Hope the below code works for your requirement. This code also changes the image randomly on every 30 seconds without user interaction.

a!localVariables(
  local!images: {
    "BOOK",
    "BUILDING",
    "BRIEFCASE",
    "AIRPLANE"
  },
  local!index: a!refreshVariable(
    value: charat(rand(1), 3),
    refreshInterval: 0.5
  ),
  local!selectedImage: local!images[if(local!index > 4, 1, local!index)],
  a!cardLayout(
    contents: {
      a!billboardLayout(
        backgroundMedia: a!documentImage(
          document: a!iconNewsEvent(icon: local!selectedImage)
        ),
        backgroundColor: "#f0f0f0",
        marginBelow: "NONE",
        overlay: a!barOverlay(
          contents: {
            a!imageField(
              align: "CENTER",
              images: {
                a!forEach(
                  items: local!images,
                  expression: a!documentImage(
                    document: if(
                      local!selectedImage = fv!item,
                      a!iconIndicator("HARVEY_100"),
                      a!iconIndicator("HARVEY_0")
                    ),
                    link: a!dynamicLink(
                      saveInto: {
                        a!save(
                          local!selectedImage,
                          local!images[fv!index]
                        )
                      }
                    )
                  )
                )
              },
              size: "ICON"
            )
          }
        )
      )
    }
  )
)

Thanks a lot buddy ..