Слайдер изображений на основе JS

Автор [Lichkin-rus], 24-07-2011, 10:45:14

« назад - далее »

[Lichkin-rus]Topic starter

Слайдер изображений на основе JS



Отлично подойдёт для сайтов кинотеаторв с светлым дизайном, кто хочет может адаптировтаь под себя

[spoiler=JS файл создать]
$.fn.infiniteCarousel = function () {

    function repeat(str, num) {
        return new Array( num + 1 ).join( str );
    }
 
    return this.each(function () {
        var $wrapper = $('> div', this).css('overflow', 'hidden'),
            $slider = $wrapper.find('> ul'),
            $items = $slider.find('> li'),
            $single = $items.filter(':first'),
           
            singleWidth = $single.outerWidth(),
            visible = Math.ceil($wrapper.innerWidth() / singleWidth), // note: doesn't include padding or border
            currentPage = 1,
            pages = Math.ceil($items.length / visible);           


        // 1. Pad so that 'visible' number will always be seen, otherwise create empty items
        //if (($items.length % visible) != 0) {
            $slider.append( $items.clone() ).append( $items.clone() )
            $items = $slider.find('> li');
        //}

        // 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
        $items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
        $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
        $items = $slider.find('> li'); // reselect
       
        // 3. Set the left position to the first 'real' item
        $wrapper.scrollLeft(singleWidth * visible);
       
        // 4. paging function
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                n = Math.abs(currentPage - page),
                left = singleWidth * dir * visible * n;
           
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft : '+=' + left
            }, 250, function () {
                if (page == 0) {
                    $wrapper.scrollLeft(singleWidth * visible * pages);
                    page = pages;
                } else if (page > pages) {
                    $wrapper.scrollLeft(singleWidth * visible);
                    // reset back to start position
                    page = 1;
                }

                currentPage = page;
            });               
           
            return false;
        }
       
        $wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>');
       
        // 5. Bind to the forward and back buttons
        $('a.back', this).click(function () {
            return gotoPage(currentPage - 1);               
        });
       
        $('a.forward', this).click(function () {
            return gotoPage(currentPage + 1);
        });
       
        // create a public interface to move to a specific page
        $(this).bind('goto', function (event, page) {
            gotoPage(page);
        });
    }); 
};


$(document).ready(function () {
$(window).resize(function() {
$('.infiniteCarousel').each(function() {
var $this = $(this)
$('.wrapper', $this).width(105)
setTimeout(function() {
$('.wrapper', $this).width($this.width()-80)
}, 0)
})
}).resize()

$('.infiniteCarousel').infiniteCarousel()
});
[/spoiler]

[spoiler=Css файл].infiniteCarousel   
    {   
     position:relative   
    }   

    .infiniteCarousel .wrapper   
    {   
     width:315px;   
     overflow:auto;   
     min-height:10em;   
     margin:0 40px;   
     top:0   
    }   

    .infiniteCarousel .wrapper ul   
    {   
     width:9999px;   
     list-style-image:none;   
     list-style-position:outside;   
     list-style-type:none;   
     margin:0;   
     padding:0;   
     top:0   
    }   

    .infiniteCarousel ul li   
    {   
     display:block;   
     float:left;   
     padding:10px;   
     height:81px;   
     width:113px   
    }   

    .infiniteCarousel ul li a img   
    {   
     display:block   
    }   

    .infiniteCarousel .arrow   
    {   
     display:block;   
     height:36px;   
     width:37px;   
     background:url(http://s004.radikal.ru/i205/1107/c9/13579ccfa8d8.png) no-repeat 0 0;   
     text-indent:-999px;   
     cursor:pointer;   
     top:36px;   
     position:absolute   
    }   

    .infiniteCarousel .forward   
    {   
     background-position:0 0;   
     right:3px   
    }   

    .infiniteCarousel .back   
    {   
     background-position:0 -72px;   
     left:5px   
    }   

    .infiniteCarousel .forward:hover   
    {   
     background-position:0 -36px   
    }   

    .infiniteCarousel .back:hover   
    {   
     background-position:0 -108px   
    }   
[/spoiler]

[spoiler=вставка на сайт]
<script type="text/javascript" src="ссылка на ваш JS"></script><table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tbody><tr><td style="padding:3px;"><div class="eTitle" style="text-align:center;">Онлайн сериалы:</div>   
    <div class="eMessage" style="text-align:center;clear:both;padding-top:2px;padding-bottom:2px;"><div class="infiniteCarousel">     
     <div class="wrapper">     
     <ul>     
     <li><a href="Ссылка на файл" title="Интерны"><img src="Ссылка на картинку" border="0" width="90"></a></li>   
     <li><a href="hСсылка на файл" title="Лучшая охрана"><img src="Ссылка на картинку" border="0" width="90"></a></li>   
     <li><a href="Ссылка на файл" title="Гонка (DRIVE)"><img src="Ссылка на картинку" border="0" width="90"></a></li>   
     <li><a href="Ссылка на файл" title="Ходячие мертвецы"><img src="Ссылка на картинку" border="0" width="90"></a></li>   
     <li><a href="hСсылка" title="Наша Russia 5 сезон"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Закрытая школа"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Универ"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Остаться в живых"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="hСсылка" title="Терминатор: Хроники Сары Коннор"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Сверхъестественное"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Барвиха + Золотые"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Зайцев +1"><img src="Ссылка" border="0" width="90"></a></li>   
     <li><a href="Ссылка" title="Реальные пацаны"><img src="Ссылка" border="0" width="90"></a></li>   
     </ul> </div> <br>   
     </div></div></td></tr></tbody></table><br>

[/spoiler]