créer un objet/classe et l'utiliser dans jquery

Salut désolé si le nom de ma question n'est pas correct. J'essaye de créer un rotateur d'image, mais j'aimerais pouvoir le réutiliser plus d'une fois dans une page, donc j'essaye de le créer en tant qu'objet/classe.créer un objet/classe et l'utiliser dans jquery

J'ai environ 5 ou 6 images sur une page. Je voudrais avoir chaque image comme rotateur, affichant une nouvelle image toutes les 2 secondes environ.

<img src="uploads/Range_Images/p6-7.jpg" class="myclass1"/> 
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass2"/> 
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass3"/> 
    <script type=text/javascript> 
     $Rotator1 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass1'); 
     setInterval($Rotator1.rotateImage(), 1000); 

     $Rotator2 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass2'); 
     setInterval($Rotator2.rotateImage(), 1000); 

     $Rotator3 = new imageRotator1('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass3'); 
     setInterval($Rotator3.rotateImage(), 1000); 
    </script>

Cest le code que je utilise pour afficher les images et de créer une instance de ma classe rotateurs

Je peux penser à quelques questions que je ne suis pas sûr des réponses aussi bien googler pendant des heures! Tout d'abord voici mon code (je mélange javascript avec jquery qui est probablement où je vais mal commencer par ...

<script type="text/javascript"> 
    $(document).ready(function(){ // maybe this should not be used when creating a object/class??? 

    // i want to use this function as a class if possible  
    function imageRotator($images_str, $class){ 
     // set up the vars 
     this.myImg = $images_str; //string containing image names 
     this.myClass = $class; //string containing class of image to change 
     this.imagelist = this.myImg.split(':'); //split the image string into an array 
     this.index = 1; // set the current index count 


     // maybe this is where i am going wrong, as in jquery $(this) refers to the current selector and maybe this.myclass (from from the imageRotator object does not work?? 
     // is it possible to reference a value from an object in jquery? 
     function prototype.rotateImage(){ 
     $(this.myclass).fadeOut('fast', function(){ 
      $(this).attr('src', this.imagelist[this.index]); 
      $(this).fadeIn('fast', function(){ 
       if (this.index == this.imagelist.length-1){ 
        this.index = 0; 
       }else{ 
        this.index++; 
       }; 
      }); 
     }); 
     }; 
    }; 
}); 
</script>

Je ne suis pas un expert en matière de programmation, mais je suis sûr que cela ne devrait être possible en quelque sorte

toute aide serait appréciée. P

mise à jour:

ok ont modifié légèrement le code selon castrohenges réponse:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var imageRotator = function($images_str, $class){ 
     // set up the vars 
     this.myImg = $images_str; //string containing image names 
     this.myClass = $class; //string containing class of image to change 
     this.imagelist = this.myImg.split(':'); //split the image string into an array 
     this.index = 1; // set the current index count 
    }; 
    function imageRotator.prototype.rotateImage(){ 
     $(this.myclass).fadeOut('fast', function(){ 
      $(this).attr('src', this.imagelist[this.index]); 
      $(this).fadeIn('fast', function(){ 
       if (this.index == this.imagelist.length-1){ 
        this.index = 0; 
       }else{ 
        this.index++; 
       }; 
      }); 
     }); 
    }; 
}); 
</script> 

</head> 

<body> 
<img src="uploads/Range_Images/p6-7.jpg" class="myclass1"/> 
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass2"/> 
    <img src="uploads/Range_Images/p6-7.jpg" class="myclass3"/> 
<script type=text/javascript> 
    $(document).ready(function(){ 
      $Rotator1 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass1'); 
      setInterval($Rotator1.rotateImage(), 1000); 

      $Rotator2 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass2'); 
      setInterval($Rotator2.rotateImage(), 1000); 

      $Rotator3 = new imageRotator('p12-13.jpg:p18-19.jpg:p4-5.jpg:p8-9.jpg:p6-7.jpg:p10-11.jpg:p14-15.jpg:p16-17.jpg', '.myclass3'); 
      setInterval($Rotator3.rotateImage(), 1000); 
     }); 
</script> 
</body>

je recevais une erreur: rotateur d'image non définie sur la ligne 45

changeant donc à

var imageRotator = function($images_str, $class){....};

mais l'erreur est toujours là?

va essayer de recréer ce script suivant les directives de plug-in et voir où je reçois ....

Source

2010-10-14 Dizzy Bryan High

Je pense que vous êtes un peu confus. Vous dites "je suis en train de mixer javascript avec jquery qui est probablement où je vais mal commencer" mais jQuery ** est ** JavaScript. –

oui je sais cela, jquery est une librairie pour jquery, donc une certaine syntaxe est diffirent si vous avez utilisé $ (this) .mycommand(). Fade(); en js de son propre chef, vous auriez une erreur? –

Si vous souhaitez utiliser, vous devez changer le prototypage

function prototype.rotateImage(){

et le placer à l'extérieur de la fonction imageRotator. Comme si:

function imageRotator($images_str, $class){ ... } 

imageRotator.prototype.rotateImage = function() { ... }

Sinon, vous pouvez aussi jeter un oeil à ce plugin jQuery http://malsup.com/jquery/cycle/ - c'est le premier que je trouve, mais je suis sûr qu'il y aura plus là-bas.

Si vous voulez utiliser votre propre code personnalisé, je recommande de l'encapsuler comme un plugin jQuery - http://docs.jquery.com/Plugins/Authoring. De cette façon, vous n'avez pas à vous soucier de l'architecture de classe et tout sera bien encapsulé dans l'objet jQuery.

Source

2010-10-14 13:27:34 Castrohenge

merci beaucoup, je vais l'essayer et faire un rapport ... J'ai déjà vu le plugin jquery cycle, mais je veux vraiment apprendre à écrire le code moi-même !!et en faisant est la meilleure façon d'apprendre, je vais jeter un oeil à la rédaction des directives :) –

+1. L'utilisation ou l'écriture d'un plugin jQuery est le bon moyen de le faire. –

à la fin j'ai fait l'option facile et utilisé le plugin de cycle car il a fait le travail tout simplement, bien que je me sois laissé donner facilement, va essayer de créer mon propre demain! Merci pour les gens d'aide. –

créer un objet/classe et l'utiliser dans jquery

Répondre

Questions connexes