Question

对不起，如果我的问题名称不正确。

我正在尝试创建一个图像旋转器，但我希望能够在页面中多次重复使用它，所以我尝试将其创建为一个对象/类。

我在页面上有大约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

更新

确定已根据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){....};

但错误仍然存在？

将尝试按照插件指南重新创建此脚本，并查看我的位置....

Answer 1

如果您想使用原型设计，则需要更改

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

创建一个对象/类并在jquery中使用它

1 个答案: