創建一個對象/類，並在jQuery中使用它

嗨，對不起，如果我的問題的名稱是不正確的。創建一個對象/類，並在jQuery中使用它

我想創建一個圖像旋轉器，但我想能夠在頁面中多次重複使用它，所以我試圖創建它作爲一個對象/類。

我在頁面上有大約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>

，這是我現在用的顯示圖像和創建我的肩類的實例代碼

過，儘管谷歌上搜索了幾個小時，我能想到的我不知道答案的幾個問題！首先這裏是我的代碼（我混合使用jQuery JavaScript的這可能是我要去的地方錯誤的開始......

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

更新：

OK稍微修改了代碼，每castrohenges回覆：

<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){....};

但錯誤仍然存在？

將嘗試重新創建這個腳本以下插件指南內容，我得到....

來源

2010-10-14 Dizzy Bryan High

我覺得你有點困惑。你說：「我混合使用jQuery的JavaScript，這可能是我開始錯誤的地方」，但jQuery **是** JavaScript。 – 2010-10-14 13:51:04

是的，我知道這一點，jQuery是一個jQuery庫，所以如果你使用$（this）.mycommand（）。fade（）;在JS本身你會得到一個錯誤？ – 2010-10-14 17:34:56

如果你想使用原型你需要改變

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對象中。

來源

2010-10-14 13:27:34 Castrohenge

非常感謝，我會給它一個去和回報... 我以前見過jquery循環插件，但真的想學習如何編寫自己的代碼！通過這樣做是最好的學習方式，我會看看創作指南:) – 2010-10-14 13:42:29

+1。使用或編寫jQuery插件是正確的方法。 – 2010-10-14 13:52:03

最後，我做了簡單的選擇，並使用循環插件，因爲它只是簡單地做了這件事，儘管我覺得很容易，但是明天我會創建自己的！感謝幫助的人們。 – 2010-10-14 17:39:30

創建一個對象/類，並在jQuery中使用它

回答

相關問題