Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.02.2012, 18:36
Новичок на форуме
Отправить личное сообщение для dima-f1 Посмотреть профиль Найти все сообщения от dima-f1
 
Регистрация: 29.02.2012
Сообщений: 1

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


Пожалуйста помогите мне решить эту задачу!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться со скриптом jQuery emere jQuery 13 08.10.2011 09:46
Помогите разобратся с Jquery append unsiker jQuery 3 08.07.2011 22:06
помогите понять jquery Xaver jQuery 0 13.04.2011 13:25
Помогите книгу найти по jQuery micscr Оффтопик 4 14.11.2009 00:42
Помогите внедрить свой jQuery в другой A.N.R.I jQuery 25 19.07.2009 01:50