Scrollable, Карусель, Слайдер в jquery без какого-либо плагина - самый простой способ - PullRequest
Новая
       33

Scrollable, Карусель, Слайдер в jquery без какого-либо плагина - самый простой способ

4 голосов
/ 09 марта 2011

Я искал учебник о слайдере jQuery (например, прокручиваемый плагин) с циклической анимацией. Без какого-либо плагина, самый простой способ, учебник

Ответы [ 2 ]

5 голосов
/ 10 марта 2011

ОБНОВЛЕНО: 27/08/2014 

    $(function() {
        /* author: Luca Filosofi * contact: aseptik@gmail.com * http://devilmaycode.it * license: Public * Updated: 27/08/2014 */
        var animating = false, iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = (liW * $slider.find('li').length);
        $slider.width(liFW);
        $('.button a').on('click', function(e) {
            e.preventDefault();
            if(!animating){
                var left = Math.abs(parseInt($slider.css('left')));
                var side = ($(this).data('direction') == 'right')  ? (((left + (liW * iXS)) >= liFW) ? 0 : -(left + liW)) : ((left > 0) ? -(left - liW) : -(liFW - (liW * iXS)));
                rotate(side);
            }
        });
        var rotate = function(leftY) {
            if(!animating){
                animating = true;
                $slider.stop(true, true).animate({left : leftY}, 500, function(){animating = false;});
            }
        }
    });
1 голос
/ 12 марта 2011

ДЕМО

https://jsfiddle.net/w9wjk22n/

Я пишу некоторый код: 

    <script type="text/javascript"> 
        $(document).ready(function() {      
            $('a.next').click(function() {
                var duplicate = $('#a li:first').clone();

                //
                $(duplicate).appendTo('#a ul');

                $('#a ul').animate({
                    marginLeft: '-=52px'
                }, 2000, 'linear', function() {
                    $('#a li:first').remove();
                }); 


            });
        });
</script>
<style type="text/css">
        #a {
            list-style: none;
            width: 52px;
            height: 50px;
            border: 1px solid blue;
            margin-left: 200px;
        }   
        #a ul {
            margin: 0;
            margin-left: -104px;
            padding: 0;
            width: 420px;
            border: 1px solid green;
            height: 50px;
            position: absolute;
        }   
        #a ul li {
            border: 1px solid red;
            float: left;
            width: 50px;
            text-align: center;
        }   
        .services {
            border: 1px solid green;
            padding: 5px;
            width: 300px;
            margin-left: 100px;
            display: none;
        }</style>
    <a href="#" class="next">next</a>
    <div id="a">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>

... но когдаЯ удаляю первый элемент, элементы перемещаются влево после анимации, и когда я нажимаю несколько раз «следующий», элемент оказывается за пределами синего контейнера.

...