我必须在我的网站上运行许多相同的功能
<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/