使用Jquery更新图像

Question

I am using BXslider and i wish to update the image. This is the code snippet:

$(function(){
  $('#slider1').bxSlider({
    auto: true,
    pager: true,
    buildPager: function(slideIndex){
     switch (slideIndex){
        default:
          return '<a href=""><img src="/images/loginPage/dot_empty.png" style="margin:2px;" /></a>';
       }
    }
  });
});

The CSS used is:-

a.pager-active > img{
    border-bottom: 2px solid #DE312A !important;
    background: url("/images/loginPage/dot_filled.png") no-repeat scroll 1px 0 !important;
    z-index:2;
}
.bx-pager a{
    text-decoration:none;
    color:transparent;
}
.bx-pager a > img{
    border-bottom: 2px solid blue;
    z-index:0;
    //background: url("/images/loginPage/dot_filled.png") no-repeat scroll 1px 0 transparent;
}

the sprite image is :

Kindly suggest me a way to update the image src, i tried using css stripes as well. Thanks in advance!!

Answer 1

All you have to do is this to change an image's source:

$(SELECTOR_FOR_IMAGE).attr('src', NEW_VALUE);

You didn't provide any information about how the rest of your markup looks, so I can't be more explicit than that, but that's all that's involved in changing an image's source attribute.