Question

我正在构建一个jQuery驱动的推子，我希望在页面上有多个实例。

目标：我试图在没有插件的帮助下从头开始构建它。


我尝试过什么：
    1.使用此关键字/选择器创建所需的变量，但没有得到我需要的     2.我还设置了一个带有争论的函数，以找出jQuery似乎不会以这种方式传递变量的困难方式。无论如何，大多数课程都是最好的学习方法。


问题：我在本地进行了一些迭代，结果不同。我目前收到太多的递归错误，虽然它确实以某种形式在本地工作。

思考：我的下一步将是对象表示法，但又害怕用另一个错误的解决方案来旋转我的车轮。

谢谢大家

JSFiddle：http://jsfiddle.net/UQmc3/

要遵循的代码示例
HTML ：

<div>
    <div class="w-fader">
        <ul class="w-slides">
            <li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>      
        </ul>
    </div>

    <div class="w-fader">
        <ul class="w-slides">
            <li class="current"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li class="next"><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-1.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-2.png" /></li>
            <li><img src="http://littleredplanedesign.com/labs/rotator/rotator-images/fader-img-3.png" /></li>              
        </ul>
    </div>

</div>

jQuery / js ：

var speed = 2000;
var name = 'fader';
var num = 1;

function setupUnique(){
$('.w-slides').each(function(){
    var panelId = $(this).attr('id');
    //alert(panelId);
    var nextItem = $(this).find('li.next');
    //alert(nextItem);
    var currentItem = $(this).find('li.current');
    var wrapHelperItem = $(this).find('.w-slides li.current+li');   
    var firstSwapItem = $(this).find('li:first');   
    var lastSwapItem = $(this).find('li:last'); 

    fadePanels();
    function fadePanels(){
    $('#'+panelId).each(function(){
        switcher();
        function switcher(){
        $(nextItem).animate({opacity:1}, speed, 'linear', function()
            {
                $(nextItem).removeClass('current');
                $(this).addClass('current');
                $(nextItem).addClass('next');
                $(this).removeClass('next');
                $(nextItem).css('opacity',0);
            });
        checker();
        }       

        //checker();

        function checker(){
        if($(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('next');
            $(firstSwapItem).addClass('next').css('opacity',0);
        }
        else if($(firstSwapItem).hasClass('next') && $(lastSwapItem).hasClass('current'))
        {
            $(firstSwapItem).addClass('current');       
            $(wrapHelperItem).addClass('next');
            $(firstSwapItem).removeClass('next');
        }
    }

    setupUnique();
    });
    }
});
}

function makeUnique(){
$('.w-slides').each(function(){
    $(this).attr('id',name+num);
    num++;
    setupUnique();
    });
}

makeUnique();

Answer 1

我可能会错误地阅读你的大括号 - 但是你是否从 setupUnique 中调用了setupUnique()？

这会导致问题。

Answer 2

鉴于您要完成的任务，creating your own jQuery plugin可能是最好的方法。但是，使用您的一般方法和您开始使用的内容，可以让您朝着正确的方向前进：

http://jsfiddle.net/UQmc3/2/

$(document).ready(function() {
    // Wait for the document to be ready
    makeUnique();
});

function makeUnique() {
    var name = 'fader'; // scope these variables to the function
    var num = 1;
    $('.w-slides').each(function() {
        $(this).attr('id', name + num);
        num++;
    });
    setupUnique();
}

function setupUnique() {
    var animateSpeed = 2000; // scope these variables to the function
    var timerInterval = 4000; // this is the timer interval

    $('.w-slides').each(function(i) {
            var $this = $(this); //refers to the current .w-slides in the .each()
            var $nextItem = $this.find('li.next');
            var $currentItem = $this.find('li.current');
            var $firstSwapItem = $this.find('li:first');
            var $lastSwapItem = $this.find('li:last');
            var $wrapHelperItem = $this.find('li.current + li');
            // create new instance of SlideSwaper
            var slideSwap = new SlideSwaper($this, $nextItem, $currentItem, 
                                            $firstSwapItem, $lastSwapItem, 
                                            $wrapHelperItem);
    });

    function SlideSwaper($this, $nextItem, $currentItem, $firstSwapItem, 
                         $lastSwapItem, $wrapHelperItem) {
        this.$this = $this;
        this.$nextItem = $nextItem;
        this.$currentItem = $currentItem;
        this.$firstSwapItem = $firstSwapItem;
        this.$lastSwapItem = $lastSwapItem;
        this.$wrapHelperItem = $wrapHelperItem;

        var fadeTimer = setInterval(function() {
            // Hide/Show the appropriate <li>
            // Everything commented out below should be combined, 
            // don't hide/show your li and then check after that to 
            // see if everything is ok - do your check first, and 
            // then as you check show/hide the approriate <li>
            /*$nextItem.animate({opacity:1}, speed, 'linear', function() {
                $currentItem.removeClass('current').css('opacity',0);
                        $nextItem.addClass('current').removeClass('next');
                        $wrapHelperItem.addClass('next').css('opacity',0);'
                        console.log('checker');
                        checker();
            });

            if($lastSwapItem.hasClass('current')) {
                        $firstSwapItem.addClass('next').css('opacity',0);
            } else if($firstSwapItem.hasClass('next') && $lastSwapItem.hasClass('current')) {
                        $firstSwapItem.addClass('current').removeClass('next');     
                        $wrapHelperItem.addClass('next');
            }*/
        }, timerInterval);

    }

}

基本上，您需要创建对象的新实例，以保持对相应<ul>的引用。也：

在文档准备好之前，这一切都不应该开始
在多次引用时使用变量引用$(this)
你没有计时器功能（我假设你希望幻灯片每隔x秒更改一次）
变量的范围应该是它们的功能（在你的情况下，它们都可以并且应该是）
您的某些功能名称含糊不清且可以改进（例如makeUnique可能是initializeSwapper等）。

你需要做一些工作才能让幻灯片改变你想要的方式。现在，设置为fadeTimer的匿名函数将每4秒执行一次，此时您可以根据需要更改幻灯片。

如果您没有使用Firebug，我建议你check it out。

jQuery - 具有多个实例的推子

2 个答案: