Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.03.2013, 17:45
Аспирант
Отправить личное сообщение для stixia007 Посмотреть профиль Найти все сообщения от stixia007
 
Регистрация: 27.05.2012
Сообщений: 47

Доработать Слайдер.
Ещё раз всем привет. Слайдер сделал devote за что ему огромное спасибо.
Я что то химичил, химичил так не хрена и не нахимичил^^
Собственно надо сделать как на этом сайте: http://www.netdreams.co.uk/

Чего не хватает:

1. Круглишков (синих) сделать чтоб они были кликабельные.
2. Картинки тоже чтоб были кликабельные.
3. И если возможно сделать чтоб текст так же появлялся. Он не много не так работает, пролистывается что ли ... =))

Сам сейчас что то химичу... Если кому не лень помогите.

Вот Код:


<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <style type="text/css">
            .slider {
                position: relative;
                background-color: #000;
                border: 1px solid #666;
                width: 1000px;
                height: 278px;
            }
            .slider .images {
                position: relative;
                overflow: hidden;
                width: 100%;
                height: 100%;
            }
            .slider .images div {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
            }
            .slider .images div:first-child {
                z-index: 1;
            }
            .slider .helper {
                position: absolute;
                bottom: 0;
                width: 100%;
                z-index: 100;
            }
            .slider .helper .fill {
                left: 0;
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.5;
                filter: Alpha(opacity=50);
            }
            .slider .helper .texts {
                position: relative;
                float: left;
            }
            .slider .helper .texts > div {
                clear: both;
                display: none;
            }
            .slider .helper .texts > div:first-child {
                display: block;
            }
            .slider .helper .texts p {
                overflow: hidden;
                white-space: nowrap;
                display: inline-block;
                margin: 15px 0 0 20px;
                padding-left: 20px;
                font: normal normal 400 10px/16px Tahoma;
                color: #fff;
                border-left: 1px solid #666;
                text-transform: uppercase;
                float: left;
            }
            .slider .helper .texts p:first-child {
                border-left: 0;
                padding-left: 0;
            }
            .slider .helper .buttons {
                position: relative;
                float: right;
                padding: 8px 10px 4px 0px;
            }
            .slider .helper .buttons b {
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 100%;
                background-color: #000;
                border: 0;
                border-left: 1px solid #343434;
                border-bottom: 1px solid #343434;
                margin: 6px;
            }
            .slider .helper .buttons b.active {
                border: 0;
                border-left: 1px solid #51959D;
                border-top: 1px solid #51959D;
                background-color: #02B1D7;
                background-image: -webkit-linear-gradient(top, #59DBEA, #024F7B);
                background-image: linear-gradient(to bottom, #59DBEA, #024F7B);
            }
        </style>
        <script type="text/javascript">
            jQuery(function(){
                var
                    itemIndexAt = 0,
                    sliderWrap = jQuery('.slider'),
                    imagesWrap = sliderWrap.find('.images'),
                    textsItems = sliderWrap.find('.texts').children(),
                    buttonsItems = sliderWrap.find('.buttons').children(),
                    imagesItems = imagesWrap.children(),
                    imagesWrapScrollWidth = parseInt(imagesWrap.css('width'))||0;

                // инициализация
                imagesWrap
                    .children(':not(:first-child)')
                    .css({left: imagesWrapScrollWidth});

                textsItems.each(function(i) {
                    jQuery(this).show().children().each(function() {
                        this.__originalWidth = parseInt(jQuery(this).css('width'))||0;
                    });
                    i !== itemIndexAt && jQuery(this).hide();
                });

                // анимация
                function animateSlider() {
                    var itemIndexPrev = itemIndexAt;
                    itemIndexAt = ++itemIndexAt < imagesItems.length ? itemIndexAt : 0;
                    buttonsItems.eq(itemIndexPrev).removeClass('active');
                    buttonsItems.eq(itemIndexAt).addClass('active');
                    imagesWrap.animate({
                        scrollLeft: imagesWrapScrollWidth
                    }, {
                        duration: 1000,
                        complete: function() {
                            imagesItems.eq(itemIndexPrev).css('left', this.scrollLeft + 'px');
                            imagesItems.eq(itemIndexAt).css('left', '0px');
                            this.scrollLeft = 0;

                            setTimeout(animateSlider, 10000);
                        }
                    });
                    textsItems
                        .eq(itemIndexPrev).hide().end()
                        .eq(itemIndexAt).show().end()
                        .children().css('width', '0px').animate({
                        _manual: 100
                    }, {
                        easing: 'linear',
                        duration: 1500,
                        step: function(now) {
                            var w= this.__originalWidth / 100 * now;
                            var c = this.__originalWidth / jQuery(this).text().length;
                            var a = ((w / c) >> 0) * c;
                            jQuery(this).css('width', a + "px");
                        },
                        complete: function() {
                            this._manual = 0;
                        }
                    });
                }

                setTimeout(animateSlider, 10000);
            });
        </script>
    </head>
    <body>
        <div class="slider">
            <div class="images">
                <div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/EUNAVFOR.jpg')"></div>
                <div style="background-image: url('http://www.netdreams.co.uk/wp-content/themes/netdreams/headers/dynamic/Perfect_pint.jpg')"></div>
            </div>
            <div class="helper">
                <div class="fill"></div>
                <div class="texts">
                    <div>
                        <p><b>CLIENT</b>: Perfect Pint</p>
                        <p>What Real Ales are serving near me? Perfect Pint will show you.</p>
                    </div>
                    <div>
                        <p><b>Привет!</b>: Пробный текст</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p>
                    </div>
                </div>
                <div class="buttons">
                    <b class="active"></b><b></b>
                </div>
            </div>
        </div>
    </body>
</html>

Последний раз редактировалось stixia007, 28.03.2013 в 17:51.
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2013, 14:56
Аспирант
Отправить личное сообщение для stixia007 Посмотреть профиль Найти все сообщения от stixia007
 
Регистрация: 27.05.2012
Сообщений: 47

1. Добавлял новую картинку и тег b - кругляшок. Всё работает, вот только когда картинка перелистывается появляется совсем другая... Короче хз что делать.
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2013, 14:58
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Без знаний javascript тут далеко не уедешь
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2013, 17:44
Аспирант
Отправить личное сообщение для stixia007 Посмотреть профиль Найти все сообщения от stixia007
 
Регистрация: 27.05.2012
Сообщений: 47

Сообщение от tsigel Посмотреть сообщение
Без знаний javascript тут далеко не уедешь
Потому и обратился к вам=)) Благо мне почти всё делали ... Сам потихоньку изучаю, мало ли мб кто поможет за 5 мин =))
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2013, 18:00
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

За 5 минут тут не управится.
Необходимо написать функцию, которая бы при нажатии на "кнопку" вычисляла свой номер минус номер активной кнопки.

Тогда вы получите количество картинок которые надо проскролить чтобы увидеть желаемую (и заодно сторону скрола в зависимости от знака).

Далее - немного исправить функцию анимации, что бы она могла принимать значения о том куда скролить и сколько раз.

Самый простой вариант.

Изначально вы просили помочь вам за деньги - не вопрос. Добрая душа помогла вам, и сделала почти все, я не буду давать вам готовых ответов, я могу подсказать вам в какую сторону копать, могу объяснить что и как в этом скрипте и помочь с написанием собственного, но не буду делать вам работу полностью и за вас. И мало кто захочет это делать.

Пишите, пробуйте, спрашивайте - не будет получаться - вам обязательно помогут.
Ответить с цитированием
  #6 (permalink)  
Старый 29.03.2013, 18:37
Аспирант
Отправить личное сообщение для stixia007 Посмотреть профиль Найти все сообщения от stixia007
 
Регистрация: 27.05.2012
Сообщений: 47

Сообщение от tsigel Посмотреть сообщение
За 5 минут тут не управится.
Необходимо написать функцию, которая бы при нажатии на "кнопку" вычисляла свой номер минус номер активной кнопки.

Тогда вы получите количество картинок которые надо проскролить чтобы увидеть желаемую (и заодно сторону скрола в зависимости от знака).

Далее - немного исправить функцию анимации, что бы она могла принимать значения о том куда скролить и сколько раз.

Самый простой вариант.

Изначально вы просили помочь вам за деньги - не вопрос. Добрая душа помогла вам, и сделала почти все, я не буду давать вам готовых ответов, я могу подсказать вам в какую сторону копать, могу объяснить что и как в этом скрипте и помочь с написанием собственного, но не буду делать вам работу полностью и за вас. И мало кто захочет это делать.

Пишите, пробуйте, спрашивайте - не будет получаться - вам обязательно помогут.
Ну да конечно, это уже наглость... Я думал работы на 5 минут видимо ошибался...
Для меня всё это как китайские иероглифы на изучение которых уйдёт минимум пару недель, у меня нет столько времени. Вопрос за деньги актуален ? =))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
Слайдер с перемоткой в двух разных блоках Джэй jQuery 0 15.10.2012 23:08
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 14:14
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19