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>

and and and ...

<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();
        }
    });

});

and and and ...

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没有任何问题，而且还有更多人参与错误修复:)

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

有什么方法可以简单地编写我的相同功能

1 个答案: