Помогите доработать навигацию jquery слайдера
Вложений: 1
Собираюсь поставить у себя на сайте слайдер контента. С яваскриптом не дружу. Нашел в интернете один, поему мнению, простенький jquery скрипт, но его надо немного модифицировать.
Вот, как этот скрипт работает сейчас: http://dima-f1-learn.16mb.com/slider/slide.php (Если не грузится, то вот архив Вложение 1149) Надо сделать так, чтобы навигация осуществлялась по ссылкам “Назад” и “Вперед”, а цифры остались только для индикации положения слайдера и были без ссылок. Вот, 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> Вот, текст jquery скрипта: $(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; }); }); Пожалуйста помогите мне решить эту задачу! |
Часовой пояс GMT +3, время: 05:10. |