Question

此插件是一个简单的轮播滑块。当页面上只有一个类的实例时，它可以工作，但是当多个实例无论点击哪个上一个/下一个按钮时它们都会移动。我没看到导致这个问题的原因。

(function($){
    $.fn.simplecarousel = function(params) {
        return this.each(function () {

        // set config
        var defaults = {
            width: 970,
            height: 400,
            next: false,
            prev: false,
            current: 0,
            items: 0,
            slidespeed: 600,
            visible: 1,
        };

        var config = $.extend(defaults, params);

        // configure carousel ul and li
        var ul = $(this);
        var li = ul.children('li');
        config.items = li.length;

        var height = config.height;
        var width = li.outerWidth(true);
        var fullWidth = li.outerWidth(true);
        var countPages = Math.ceil(($(config.items).length) * config.visible);
        var i = 1;

        if(config.visible>1) {
            width = width*config.visible;
        }

        ul.wrap('<div class="carousel-frame" style="width:'+width+'px;height:'+height+'px;overflow:hidden">');
        var container = ul.parent('.carousel-frame');
        ul.width(config.items * fullWidth);
        ul.height(config.height);

        ul.css('overflow','hidden');

        li.each(function(i,item) {
            $(item).width(config.width);
            $(item).height(config.height);
            $(item).css('float','left');
        });

        // function for sliding the carousel
        var slide = function(dir, click) {

            if(dir == "next") {
                config.current += config.visible;
                if(config.current >= config.items) {
                    config.current = 0;
                }
            } else if(dir == "prev") {
                config.current -= config.visible;
                if(config.current < 0) {
                    config.current = (config.visible == 1) ? config.items-1 : config.items - config.visible + (config.visible - (config.items % config.visible));
                }
            } else {
                config.current = dir;
            }


            // slide
            ul.animate( {marginLeft: -1.0 * config.current * fullWidth}, config.slidespeed );

            if(typeof click != "undefined") {
                config.auto = false;
            }

        }

        // set event handler for next and prev
        if(config.next != false) {
            config.next.click(function() {
                i++;
                if(i >= 2){ $(config.prev).show(); $(this).parent().find('.slider-wrapper').css({margin: '0px'}); } 
                if(i == (countPages)) { $(config.next).hide(); }
                slide('next',true);
            });
        }

        if(config.prev != false) {
            config.prev.click(function() {
                i--;
                if(i == 1){ $(config.prev).hide(); $(this).parent().find('.slider-wrapper').css({marginLeft: '60px'}); } 
                if(i < (countPages)) { $(config.next).show(); }
                slide('prev',true);
            });
        }

        });
    }
    })(jQuery);

JS

jQuery(document).ready(function() {

            $(".slider-wrap").simplecarousel({
                width: 310,
                visible: 3,
                next: $('.pager-right'),
                prev: $('.pager-left')
            });
        });

HTML

<div class="pager-left"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap">
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
</ul>
</div>
<div class="pager-right"><i class="icon-chevron-right icon-4x"></i></div>

<div class="pager-left"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap">
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Etiam in risus mauris, eget ultricies erat.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
        <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
</ul>
</div>
<div class="pager-right"><i class="icon-chevron-right icon-4x"></i></div>

Answer 1

这可能会解决问题。

JS：

jQuery(document).ready(function() {
        $(".slider-wrap1").simplecarousel({
            width: 310,
            visible: 3,
            next: $('.pager-right1'),
            prev: $('.pager-left1')
        });

      $(".slider-wrap2").simplecarousel({
            width: 310,
            visible: 3,
            next: $('.pager-right2'),
            prev: $('.pager-left2')
        });
});

HTML：

<div class="pager-left1"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap1">
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
</ul>
</div>
<div class="pager-right1"><i class="icon-chevron-right icon-4x"></i></div>

<div class="pager-left2"><i class="icon-chevron-left icon-4x"></i></div>
<div class="slider-wrapper">
<ul class="slider-wrap2">
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Etiam in risus mauris, eget ultricies erat.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
    <li>
    <img src="scrap/image.jpg" width="310" height="174" />
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <p>Vivamus eget ipsum enim, ut eleifend turpis. Maecenas non enim quis sapien venenatis placerat. Curabitur dignissim lobortis quam non malesuada.</p>
    </li>
</ul>
</div>
<div class="pager-right2"><i class="icon-chevron-right icon-4x"></i></div>

jQuery插件的多个实例

1 个答案: