任何方式來簡短代碼我的相同功能？

Question

我要在我的網站上運行許多同樣的功能

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

和和和...

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

和我一樣的功能太

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/和無bug，還有更多的人貢獻bug修復:)

差點忘了，它總是可重複使用的哈哈:)不像你的功能:)