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/を使用するだけで、そのバグはなく、さらに多くの人々がバグ修正に貢献しています:)

ほとんど忘れていましたが、常に再利用可能です笑:) ur関数とは異なり:)

于 2011-05-13T11:02:54.850 に答える