title: shift backward images from current image to forward
body: <p><a href="http://jsfiddle.net/H86FJ/1/" rel="nofollow">demo</a></p>
  
  <p>I have the following html....</p>
  
  <pre><code>&lt;div id="banner"&gt;
      &lt;img class="img1" src="" /&gt;
      &lt;img class="img2" src="" /&gt;
      &lt;img class="img3" src="" /&gt;
      &lt;img class="img4" src="" /&gt;
  &lt;/div&gt;
  &lt;ul&gt;
      &lt;li class='li1'&gt;one&lt;/li&gt;
      &lt;li class='li2'&gt;two&lt;/li&gt;
      &lt;li class='li3'&gt;three&lt;/li&gt;
      &lt;li class='li4'&gt;four&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When I click on <code>.li3</code>(three) the previous images <code>.img1, .img2</code> should be shifted to the last i.e. here from <code>.img4</code>. The output should be like this:</p>
  
  <pre><code>&lt;div id="banner"&gt;         
          &lt;img class="img3" src="" /&gt;
          &lt;img class="img4" src="" /&gt;
          &lt;img class="img1" src="" /&gt;
          &lt;img class="img2" src="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have no any idea on this that how could I do this?</p>
  
  <p><strong>update</strong></p>
  
  <p>I'm having a little problem from the following provided answer that is I'm using a plugin in there the images are sliding when I use the code answered this appends the images repeatedly when clicked something like this:</p>
  
  <pre><code>&lt;div id="banner"&gt;         
              &lt;img class="img3" src="" /&gt;
              &lt;img class="img4" src="" /&gt;
              &lt;img class="img1" src="" /&gt;
              &lt;img class="img2" src="" /&gt;
              &lt;img class="img2" src="" /&gt;
              &lt;img class="img1" src="" /&gt;
              &lt;img class="img2" src="" /&gt;
              &lt;img class="img3" src="" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How could I remove previous one?</p>