Adding css style by jquery corrupt carousel
===

Here is all javascript code:

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="assets/templates/default/_scripts/jquery.innerfade.js"></script>
    <script type="text/javascript">
    	$(document).ready( function(){
    		$('.rotation ul').addClass('image_rotation');
    		$('.image_rotation').css("display","block");
    		$('.image_rotation').innerfade({
    			speed: 'slow',
    			timeout: 10000,
    			type: 'sequence'
    		});
    	});
    </script>
    <script type="text/javascript">
     var save_url = "background-font-size-save.html"
     $(document).ready(function () {
      /*  Images: rotate, frame, shadow  */
      $('.rotation ul li img').each(function() {
        if ($(this).is(":first-child")) {
          var m_left=0;
          var m_top=0;
        }
        else {
          var m_left=0;
          var m_top=0;
          m_left = parseInt($(this).prev().attr("width")) + parseInt($(this).prev().css('margin-left'));
          if (parseInt(m_left)+parseInt($(this).attr("width")) > 430) {
            m_left=0;
            m_top=250-parseInt($(this).attr("height"));
          }
        }
        var r_rand = Math.floor(Math.random() * 10) - 5;
        $(this).css({'border':'5px #ffffff solid','border-radius':'10px','transform':'rotate('+r_rand+'deg)','-moz-transform':'rotate('+r_rand+'deg)','-webkit-transform':'rotate('+r_rand+'deg)','-ms-transform':'rotate('+r_rand+'deg)','box-shadow':'4px 4px 10px -3px #000000','position':'absolute','margin':m_top+'px 0 0 '+m_left+'px'});
      });
      /*  images end  */
      background(5);
      $('html').css('font-size', 14);
      var originalFontSize = $('html').css('font-size');
     });
     function background(n) { $('.wrap').css("background","url(assets/templates/default/images/bg"+n+".jpg)"); $.ajax({ type: "POST", url: save_url, data: { background: n } }); return false; }
     function big_font() {
      var currentFontSize = $('html').css('font-size');
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*1.1;
      $('html').css('font-size', newFontSize);
      $.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
      return false;
     }
     function small_font() {
      var currentFontSize = $('html').css('font-size');
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*0.9;
      $('html').css('font-size', newFontSize);
      $.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
      return false;
     }
    </script>

I have few images, which i want to rotate, add border, shadow. But I also use jquery plugin to rotate li content. Html look like this:

    <div class="rotation">
     <ul>
      <li><img src=".." width=".." height=".." /></li>
      <li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
      <li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
     </ul>
    </div>

Problem I have is if i add to each image shadow, rotate it, border, using this jquery code, content from each li tags doesnt disappear and it show all the time. If i remove code which add shadow, border etc. it show one li content in the same time. Why is that? How can i add all my style to each image without corrupting carousel?