Изменить направление в javascript

Question

На моем веб-сайте есть javascript-код для основного слайдера, и все направления для перемещения текста слева направо, как я могу изменить его справа налево?

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery.min.js"></script> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      var current = 1; 

      var iterate  = function(){ 
       var i = parseInt(current+1); 
       var lis = $('#rotmenu').children('li').size(); 
       if(i>lis) i = 1; 
       display($('#rotmenu li:nth-child('+i+')')); 
      } 
      display($('#rotmenu li:first')); 
      /* In intervals of 5 seconds jump to the next element */ 
      var slidetime = setInterval(iterate,5000); 

      $('#rotmenu li').bind('click',function(e){ 
       clearTimeout(slidetime); 
       display($(this)); 
       e.preventDefault(); 
      }); 

      function display(elem){ 
       var $this = elem; 
       var repeat = false; 
       if(current == parseInt($this.index() + 1)) 
        repeat = true; 

       if(!repeat) 
        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){ 
         $(this).animate({'opacity':'0.7'},700); 
        }); 

       current = parseInt($this.index() + 1); 

       var elem = $('a',$this); 

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300); 

       var info_elem = elem.next(); 
       $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){ 
        $('h1',$(this)).html(info_elem.find('.info_heading').html()); 
        $(this).animate({'left':'0px'},400,'easeInOutQuad'); 
       }); 

       $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ 
        $('p',$(this)).html(info_elem.find('.info_description').html()); 
        $(this).animate({'bottom':'0px'},400,'easeInOutQuad'); 
       }) 
       $('#rot1').prepend(
       $('<img/>',{ 
        style : 'opacity:0', 
        className : 'bg' 
       }).load(
       function(){ 
        $(this).animate({'opacity':'1'},600); 
        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ 
         $(this).remove(); 
        }); 
       } 
      ).attr('src','<?php echo get_template_directory_uri(); ?>/images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300') 
      ); 
      } 
     }); 
    </script> 

Первоначально издается на английском языке, и я хочу настроить его для персидского и арабского языков.

Answer 1

вам нужно будет заменить marginRight с MarginLeft

также вам нужно будет сделать некоторые изменения с вашим Css, как направление в теле и выравнивание текста

Answer 2

Попробуйте этот код. Я изменил положение текстового потока в двух строках и добавил комментарии, так что вы можете легко найти их.

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery.min.js"></script> 
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/jquery.easing.1.3.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     var current = 1; 

     var iterate  = function(){ 
      var i = parseInt(current+1); 
      var lis = $('#rotmenu').children('li').size(); 
      if(i>lis) i = 1; 
      display($('#rotmenu li:nth-child('+i+')')); 
     } 
     display($('#rotmenu li:first')); 
     /* In intervals of 5 seconds jump to the next element */ 
     var slidetime = setInterval(iterate,5000); 

     $('#rotmenu li').bind('click',function(e){ 
      clearTimeout(slidetime); 
      display($(this)); 
      e.preventDefault(); 
     }); 

     function display(elem){ 
      var $this = elem; 
      var repeat = false; 
      if(current == parseInt($this.index() + 1)) 
       repeat = true; 

      if(!repeat) 
       $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){ 
        $(this).animate({'opacity':'0.7'},700); 
       }); 

      current = parseInt($this.index() = 1); 

      var elem = $('a',$this); 

       elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300); 

      var info_elem = elem.next(); 
      $('#rot1 .heading').animate({'right':'-420px'}, 500,'easeOutCirc',function(){ //changed left to right 
       $('h1',$(this)).html(info_elem.find('.info_heading').html()); 
       $(this).animate({'right':'0px'},400,'easeInOutQuad'); //changed left to right 
      }); 

      $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){ 
       $('p',$(this)).html(info_elem.find('.info_description').html()); 
       $(this).animate({'bottom':'0px'},400,'easeInOutQuad'); 
      }) 
      $('#rot1').prepend(
      $('<img/>',{ 
       style : 'opacity:0', 
       className : 'bg' 
      }).load(
      function(){ 
       $(this).animate({'opacity':'1'},600); 
       $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){ 
        $(this).remove(); 
       }); 
      } 
     ).attr('src','<?php echo get_template_directory_uri(); ?>/images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300') 
     ); 
     } 
    }); 
</script>