내 동일한 기능을 짧은 코드로 작성할 수있는 방법은 무엇입니까?

Question

내가 가지고있는 많은 동일한 기능이 ...

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x2"> 

<ul class="gallery clearfix"> 

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 
<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 


<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 


<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 



<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 
</ul> 
</section> 
</section> 

내 동일한 기능을 내 사이트에

<section class="leilig-right" id="leilig-right-box1"> 

<section class="glwrap x1"> 

<ul class="gallery clearfix"> 

<div id="navz"> 
<span id="prev" class="prev" style="cursor:pointer;"></span> 
<span id="next" class="next" style="cursor:pointer;"></span> 
</div> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 
<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 


<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 


<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 



<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 

<li class="g2"> 
    <a href="#"> 
    <img src="http://www.supershareware.com/images/icons/Future_City_3D_Screensaver-31411.gif"> 
    </a> 
</li> 
</ul> 
</section> 
</section> 

를 실행하고 그리고 너무

function scrollToPositionx1(element) { 
    if (element !== undefined) { 
     $(".x1").scrollTo(element, 800, { 
      margin: true 
     }); 
    } 
} 

$(function() { 

    //Create an Array of posts 
    var posts = $('.x1 img'); 
    var position = 0; //Start Position 
    var next = $('.x1 #next'); 
    var prev = $('.x1 #prev').hide(); 

    //Better performance to use Id selectors than class selectors 
    next.click(function(evt) { 
     //Scroll to next position 
     prev.show(); 
     scrollToPositionx1(posts[position += 1]); 
     if (position === posts.length - 6) { 
      next.hide(); 
     } 
    }); 

    prev.click(function(evt) { 
     //Scroll to prev position  
     next.show(); 
     scrollToPositionx1(posts[position -= 1]); 
     if (position === 0) { 
      prev.hide(); 
     } 
    }); 

}); 

및 및 및 ...

function scrollToPositionx2(element) { 
    if (element !== undefined) { 
     $(".x2").scrollTo(element, 800, { 
      margin: true 
     }); 
    } 
} 

$(function() { 

    //Create an Array of posts 
    var posts = $('.x2 img'); 
    var position = 0; //Start Position 
    var next = $('.x2 #next'); 
    var prev = $('.x2 #prev').hide(); 

    //Better performance to use Id selectors than class selectors 
    next.click(function(evt) { 
     //Scroll to next position 
     prev.show(); 
     scrollToPositionx2(posts[position += 1]); 
     if (position === posts.length - 6) { 
      next.hide(); 
     } 
    }); 

    prev.click(function(evt) { 
     //Scroll to prev position  
     next.show(); 
     scrollToPositionx2(posts[position -= 1]); 
     if (position === 0) { 
      prev.hide(); 
     } 
    }); 

}); 

다른 X1, X2 등 ...

내 기능을 쇼트 코드하는 방법은 없습니까?

라이브 데모 : http://jsfiddle.net/G3ERL/

Answer 1

난 그냥 http://jquery.malsup.com/cycle/nest2.html

를 사용하고 단지 http://jquery.malsup.com/cycle/를 사용하고 버그 무료 많은 사람들이 버그 수정 :

거의 그 항상 잊고에 기여해야한다고 생각 재사용 가능한 LOL :) UR 기능과 달리 :)