Показать сообщение отдельно
  #5 (permalink)  
Старый 20.06.2015, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

TeMb14, строка 32 для установки паузы и конечно загрузить сами плагины карусели и автоскрола.
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jCarousel Examples</title>
        <style type="text/css">body{background:#000052}
         .jcarousel-wrapper{margin:20px auto;position:relative;border:10px solid #fff;width:600px;height:400px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 2px #999;-moz-box-shadow:0 0 2px #999;box-shadow:0 0 2px #999}
         .jcarousel-wrapper .photo-credits{position:absolute;right:15px;bottom:0;font-size:13px;color:#fff;text-shadow:0 0 1px rgba(0,0,0,0.85);opacity:.66}
         .jcarousel-wrapper .photo-credits a{color:#fff}
         .jcarousel{position:relative;overflow:hidden}
         .jcarousel ul{width:20000em;position:relative;list-style:none;margin:0;padding:0}
         .jcarousel li{float:left}
         .jcarousel-control-prev,.jcarousel-control-next{position:absolute;top:200px;width:30px;height:30px;text-align:center;background:#4E443C;color:#fff;text-decoration:none;text-shadow:0 0 1px #000;font:24px/27px Arial,sans-serif;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;-webkit-box-shadow:0 0 2px #999;-moz-box-shadow:0 0 2px #999;box-shadow:0 0 2px #999}
         .jcarousel-control-prev{left:-50px}
         .jcarousel-control-next{right:-50px}
         .jcarousel-control-prev:hover span,.jcarousel-control-next:hover span{display:block}
         .jcarousel-control-prev.inactive,.jcarousel-control-next.inactive{opacity:.5;cursor:default}
         .jcarousel-pagination{position:absolute;bottom:0;left:15px}
         .jcarousel-pagination a{text-decoration:none;display:inline-block;font-size:11px;line-height:14px;min-width:14px;background:#fff;color:#4E443C;border-radius:14px;padding:3px;text-align:center;margin-right:2px;opacity:.75}
         .jcarousel-pagination a.active{background:#4E443C;color:#fff;opacity:1;text-shadow:0 -1px 0 rgba(0,0,0,0.75)}
         </style>
        <!-- Example assets -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.3/jquery.jcarousel.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.3/jquery.jcarousel-autoscroll.js"></script>
        <script>
    (function($) {
        $(function() {
            $('.jcarousel').jcarousel({
                wrap: 'circular'
            }).jcarouselAutoscroll({
                interval: 6000,
                target: '+=1',
                autostart: true
            });
        });
    })(jQuery);
  </script>

    </head>
    <body>

        <div class="wrapper">


            <div class="jcarousel-wrapper">
                <div data-jcarousel="true" data-wrap="circular" class="jcarousel">
                    <ul>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img1.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img2.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img3.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img4.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img5.jpg" width="600" height="400" alt=""></li>
                        <li><img src="http://sorgalla.com/jcarousel/examples/_shared/img/img6.jpg" width="600" height="400" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>

    </body>
</html>
Ответить с цитированием