создание объекта / класса и использование его в jquery - PullRequest
Новая
       9

создание объекта / класса и использование его в jquery

0 голосов
/ 14 октября 2010

Привет, извините, если название моего вопроса неверно.

Я пытаюсь создать ротатор изображения, но я хотел бы иметь возможность использовать его более одного раза на странице, поэтому я пытаюсь создать его как объект / класс.

У меня около 5 или 6 изображений на странице. Я хотел бы, чтобы каждое изображение отображалось как ротатор, отображая новое изображение каждые 2 секунды или около того. 

    <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>

Это код, который я использую для отображения изображений и создания экземпляра моего класса ротатора

Я могу вспомнить несколько вопросов, я тоже не уверен в ответах, несмотря на то, что гуглял часами! Во-первых, вот мой код (я смешиваю javascript с jquery, где, вероятно, я ошибаюсь, чтобы начать с ... 

<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>

Я ни в коем случае не эксперт в программировании, но я уверен, что это как-то возможно.

любая помощь будет высоко ценится: P

Обновление:

Хорошо, мы немного изменили код в соответствии с ответом Кастрохенджа: 

<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>

Я получил ошибку: ротатор изображения не определен в строке 45

следовательно, изменив его на 

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

но ошибка все еще там?

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

1 Ответ

1 голос
/ 14 октября 2010

Если вы хотите использовать прототипы, вам нужно изменить 

function prototype.rotateImage(){

и поместите его вне функции imageRotator. Вот так: 

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

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

В качестве альтернативы вы также можете взглянуть на этот плагин jQuery http://malsup.com/jquery/cycle/ - это первый, который я нашел, но я уверен, что там будет больше.

Если вы действительно хотите использовать свой собственный код, я рекомендую обернуть его как плагин jQuery - http://docs.jquery.com/Plugins/Authoring. Таким образом, вам не нужно сильно беспокоиться об архитектуре классов, и все будет красиво инкапсулировано в объект jQuery.

...