0

我必须在我的网站上运行许多相同的功能

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

4

1 回答 1

2

我认为你应该只使用http://jquery.malsup.com/cycle/nest2.html

并且只需使用http://jquery.malsup.com/cycle/和它的错误免费和更多的人为错误修复做出贡献:)

差点忘了，它总是可重复使用的，哈哈 :) 不像你的功能 :)

于 2011-05-13T11:02:54.850 回答