Помогите Доработать Навигацию Jquery Слайдера

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем dima-f1, 1 мар 2012.

  1. dima-f1

    dima-f1 Гость

    Собираюсь поставить у себя на сайте слайдер контента. С яваскриптом не дружу. Нашел в интернете один, поему мнению, простенький jquery скрипт, но его надо немного модифицировать.
    Вот, как этот скрипт работает сейчас: Демонстрация
    Если не грузится, то вот архив Посмотреть вложение slide.zip Надо сделать так, чтобы навигация осуществлялась по ссылкам “Назад” и “Вперед”, а цифры остались только для индикации положения слайдера и были без ссылок.
    Вот, html разметка:
    <!--shcode--><pre><code class='html'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="slide.js"></script>
    <title>Слайдер</title>
    <style>
    #block {
    width: 688px;
    height: 200px;
    overflow: hidden;
    margin: 50px auto 20px auto;
    border: 4px solid #175B53;
    }
    #slider {
    position:relative;
    }
    .slider_content {
    width: 150px;
    height: 154px;
    margin: 10px 10px;
    line-height: 154px;
    border: 1px solid #557EEF;
    float: left;
    position: relative;
    text-align: center;
    }
    .inslider a {
    text-decoration:none;
    }
    .contentholder {
    height: 200px;
    width: 172px;
    overflow: visible;
    position: relative;
    }
    .contentslider {
    position: absolute;
    top: 10px;
    left: 0;
    }
    .contentnav {
    text-align: center;
    }
    .contentnav a {
    text-decoration: none;
    background-color: #D1FFD2;
    padding: 0 7px;
    }
    .contentnav a.active {
    background-color: #FFEE7E;
    }
    .other_nav {
    text-align: center;
    }
    </style>
    </head>

    <body>

    <div id='block'>
    <div class="contentholder">
    <div class="contentslider">
    <div class="slider_content">
    Какой то текст 1
    </div>
    <div class="slider_content">
    Какой то текст 2
    </div>
    <div class="slider_content">
    Какой то текст 3
    </div>
    <div class="slider_content">
    Какой то текст 4
    </div>
    <div class="slider_content">
    Какой то текст 5
    </div>
    <div class="slider_content">
    Какой то текст 6
    </div>
    <div class="slider_content">
    Какой то текст 7
    </div>
    <div class="slider_content">
    Какой то текст 8
    </div>
    </div>
    </div>
    </div>

    <div class="contentnav">
    <a rel="1" href="#">1</a>
    <a rel="2" href="#">2</a>
    <a rel="3" href="#">3</a>
    <a rel="4" href="#">4</a>
    <a rel="5" href="#">5</a>
    </div>

    <div class="other_nav"> <a href="#">Назад<a/> <a href="#">Вперед<a/> </div>

    </body>
    </html>[/CODE]

    Вот, текст jquery скрипта:
    Код (Javascript):
    $(document).ready(function() {
    //Активизируем первую ссылку
    $(".contentnav a:first").addClass("active");
    //Ширина площади одной страницы
    var contentwidth = $(".contentholder").width();
    //Обще количество страниц
    var totalcontent = $(".slider_content").size();
    //Общая ширина всего контента (всех страниц)
    var allcontentwidth = contentwidth * totalcontent;
    //Проскальзывание контента устанавливаем на ширину, которую получили выше
    $(".contentslider").css({'width' : allcontentwidth});
    //Теперь пишем новую функцию для проскальзывания и навигации
    rotate = function(){
    //Количество раз, на которое надо прокрутить контент
    var slideid = $active.attr("rel") - 1;
    //Устанавливаем дистанцию, на которую происходит единичная прокрутка
    var slidedistance = slideid * contentwidth;
    //Удаляем активный класс
    $(".contentnav a").removeClass('active');
    //Добавляем активный класс
    $active.addClass('active');
    //Анимация проскальзывания
    $(".contentslider").animate({
    left: -slidedistance
    }, 700 );
    };

    //Устанавливаем время для проведения проскальзывания
    rotation = function(){
    play = setInterval(function(){
    //Навигация следующего слайда
    $active = $('.contentnav a.active').next();
    if ( $active.length === 0) {
    //Перемещаемся к первому слайду в навигации
    $active = $('.contentnav a:first');
    }
    rotate();
    //Таймер устанавливаем на 5 сек
    }, 15000);
    };
    //Запускаем функцию вращения
    rotation();
    $(".contentnav a").click(function() {
    $active = $(this);
    clearInterval(play);
    rotate();
    rotation();
    return false;
    });
    });
    Пожалуйста помогите мне решить эту задачу!
     
Загрузка...

Поделиться этой страницей