Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2014, 09:54
Новичок на форуме
Отправить личное сообщение для opalsmoke Посмотреть профиль Найти все сообщения от opalsmoke
 
Регистрация: 27.11.2014
Сообщений: 5

Навигация для слайдера
Используется готовый способ реализации слайдера на сайте отсюда. Мне нужно реализовать всего две кнопки навигации - вперед / назад. Для навигации запланировал использовать кнопки со стилями в нужном мне расположении
<a href="" onclick=''><div class="navleft"></div></a>
<a href="" onclick=''><div class="navright"></div></a>
Я так понял, что мне придется писать две доп. функции для кнопки вперед / назад. К сожалению моих знаний не хватает и посему прошу вашей помощи!

P.S код используемого мною скрипта
$(document).ready(function() {
 $(".slider").each(function () { // обрабатываем каждый слайдер
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
   $(this).addClass("slider"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
 });
});
function sliderJS (obj, sl) { // slider function
 var ul = $(sl).find("ul"); // находим блок
 var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
 var step = $(bl).width(); // ширина объекта
 $(ul).animate({marginLeft: "-"+step*obj}, 1000); // 500 это скорость перемотки
}
 
//window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);
 
//window.next(function(){var n = $(".slider .nav span.on").next();n.click();},1);
 
 
 
 
 
$(document).on("click", ".slider .nav span", function() { // slider click navigate
 var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
 $(sl).find("span").removeClass("on"); // убираем активный элемент
 $(this).addClass("on"); // делаем активным текущий
 var obj = $(this).attr("rel"); // узнаем его номер
 sliderJS(obj, sl); // слайдим
 return false;
});

Пробовал при нажатии на кнопки что-то типа
<a href="" onclick='function(){var n = $(".slider .nav span.on").next();n.click();};'><div class="navleft"></div></a>
<a href="" onclick='function(){var n = $(".slider .nav span.on").prev();n.click();};'><div class="navright"></div></a>

Естественно не работает, но вопрос, в правильном ли я двигаюсь направлении?
ПАМАГИТЕ МНЕ!
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2014, 10:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

opalsmoke,
тут помедитировать нежелаите ?


Простейший слайдер

Последний раз редактировалось рони, 27.11.2014 в 11:01.
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2014, 11:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

opalsmoke,
слайдеровщиков развелось ... смотреть пост 9 по ссылке выше ... сделано по тому же примеру.
если слайдеров несколько ... строку 105 уточнить ... пихать дивы в ссылки ... мда...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Очень простой слайдер на JS+jQuery</title>
	<style type="text/css">
	body {
		background: #eee;
		margin: 0;
		font-family: arial;
	}
	.wrapper {
		background: #fff;
		width: 700px;
		padding: 1px 15px 15px;
		margin: 0 auto;
	}
	.slider {
		z-index: 9;
		width: 700px;
		height: 290px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}
	.slider ul,
	.slider li {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.slider ul {
		width: 9999px;
	}
	.slider ul li {
		list-style-type: none;
		float: left;
		width: 700px;
		height: 290px;
	}
	.slider .nav {
		position: absolute;
		left: 15px;
		bottom: 12px;
	}
	.slider .nav span {
		opacity: 0.9;
		background: #fff;
		margin: 0 8px 0 0;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		cursor: pointer;
		overflow: hidden;
		display: block;
		float: left;
		box-shadow: 0 1px 2px #000;
	}
	.slider .nav span.on {
		background: #2e9419;
	}
	</style>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".slider").each(function ()
		{
			var obj = $(this);
			$(obj).append("<div class='nav'></div>");

			$(obj).find("li").each(function ()
			{
				$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
				$(this).addClass("slider"+$(this).index());
			});

			$(obj).find("span").first().addClass("on");
		});



    });

	function sliderJS (obj, sl) // slider function
	{
		var ul = $(sl).find("ul");
		var bl = $(sl).find("li.slider"+obj);
		var step = $(bl).width();
		$(ul).animate({marginLeft: "-"+step*obj}, 500);
	}

	$(document).on("click", ".slider .nav span", function() // slider click navigate
	{
		var sl = $(this).closest(".slider");
		$(sl).find("span").removeClass("on");
		$(this).addClass("on");
		var obj = $(this).attr("rel");
		sliderJS(obj, sl);
		return false;
	});
 $(document).on("click", ".navleft, .navright", function(b) {
     b.preventDefault();
     b = $(".slider");
     var c = b.find(".nav span"),
         a = c.filter(".on");
     a.removeClass("on");
     a = +a.attr("rel");
     a += $(this).is(".navright") ? 1 : -1;
     a == c.length && (a = 0);
     0 > a && (a = c.length - 1);
     c.eq(a).addClass("on");
     sliderJS(a, b);
 });

</script>
</head>
<body>

	<h1>Простой слайдер изображений на jQuery</h1>
	<div class="slider">
		<ul>
			<li><img src="http://dedushka.org/demo/slider/i/1.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/2.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/3.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/4.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/5.jpg" alt="" /></li>
		</ul>
	</div>

<a href="" ><div class="navleft">prev</div></a>
<a href="" ><div class="navright">next</div></a>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2014, 12:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

opalsmoke,
Вариант ... с генерацией кнопок вперёд назад ... первоначальный код из dedushka.org
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>Очень простой слайдер на JS+jQuery</title>
	<style type="text/css">
	body {
		background: #eee;
		margin: 0;
		font-family: arial;
	}
	.wrapper {
		background: #fff;
		width: 700px;
		padding: 1px 15px 15px;
		margin: 0 auto;
	}
	.slider {
		z-index: 9;
		width: 700px;
		height: 290px;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
	}
	.slider ul,
	.slider li {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.slider ul {
		width: 9999px;
	}
	.slider ul li {
		list-style-type: none;
		float: left;
		width: 700px;
		height: 290px;
	}
	.slider .nav {
		position: absolute;
		left: 15px;
		bottom: 12px;
	}
	.slider .nav span {
		opacity: 0.9;
		background: #fff;
		margin: 0 8px 0 0;
		width: 16px;
		height: 16px;
		border-radius: 8px;
		cursor: pointer;
		overflow: hidden;
		display: block;
		float: left;
		box-shadow: 0 1px 2px #000;
	}
	.slider .nav span.on {
		background: #2e9419;
	}

.slider .prev {
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -20px;
	opacity: .5;
	cursor: pointer;
    text-decoration:  none;
}
.prev:after{
  content: '\25c4';
  color: rgb(255, 255, 255);
    font: 28px ;
}
.slider:hover .prev{
  opacity: 1;
}
.slider .next {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -20px;
	opacity: .5;
	cursor: pointer;
    text-decoration:  none;
}
.next:after{
  content: '\25ba';
  color: rgb(255, 255, 255);
    font: 28px;
}
.slider:hover .next{
  opacity: 1;
}

	</style>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".slider").each(function ()
		{
			var obj = $(this);
			$(obj).append("<div class='nav'></div>");

			$(obj).find("li").each(function ()
			{
				$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
				$(this).addClass("slider"+$(this).index());
			});
            $.each(['prev','next'],function ()
			{
			   $("<a/>",{'class' : this, href : ''}).appendTo(obj);
			});

			$(obj).find("span").first().addClass("on");
		});



    });

	function sliderJS (obj, sl) // slider function
	{
		var ul = $(sl).find("ul");
		var bl = $(sl).find("li.slider"+obj);
		var step = $(bl).width();
		$(ul).animate({marginLeft: "-"+step*obj}, 500);
	}

	$(document).on("click", ".slider .nav span", function() // slider click navigate
	{
		var sl = $(this).closest(".slider");
		$(sl).find("span").removeClass("on");
		$(this).addClass("on");
		var obj = +$(this).attr("rel");
		sliderJS(obj, sl);
		return false;
	});
 $(document).on("click", ".slider .next, .slider .prev", function(b) {
     b.preventDefault();
     b = $(this).closest(".slider");
     var c = b.find(".nav span"),
         a = c.filter(".on");
     a.removeClass("on");
     a = +a.attr("rel");
     a += $(this).is(".next") ? 1 : -1;
     a == c.length && (a = 0);
     0 > a && (a = c.length - 1);
     c.eq(a).addClass("on");
     sliderJS(a, b);
 });

</script>
</head>
<body>

	<h1>Простой слайдер изображений на jQuery</h1>
	<div class="slider">
		<ul>
			<li><img src="http://dedushka.org/demo/slider/i/1.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/2.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/3.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/4.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/5.jpg" alt="" /></li>
		</ul>
	</div>
    <p></p>
    <div class="slider">
		<ul>
			<li><img src="http://dedushka.org/demo/slider/i/1.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/2.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/3.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/4.jpg" alt="" /></li>
			<li><img src="http://dedushka.org/demo/slider/i/5.jpg" alt="" /></li>
		</ul>
	</div>
</body>
</html>

Последний раз редактировалось рони, 27.11.2014 в 13:30.
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2014, 13:50
Новичок на форуме
Отправить личное сообщение для opalsmoke Посмотреть профиль Найти все сообщения от opalsmoke
 
Регистрация: 27.11.2014
Сообщений: 5

Восхитительно! Благодарю вас за оказанную мне помощь!
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2014, 10:25
Новичок на форуме
Отправить личное сообщение для opalsmoke Посмотреть профиль Найти все сообщения от opalsmoke
 
Регистрация: 27.11.2014
Сообщений: 5

У меня возникла еще одна проблема. Пытаюсь разместить два подобных слайдера на одной странице - не работают! Пытался изменить название классов для второго слайдера, но тщетно.

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".part11-otziv").each(function ()
		{
			var obj = $(this);
			$(obj).append("<div class='nav'></div>");

			$(obj).find("li").each(function ()
			{
				$(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>");
				$(this).addClass("part11-otziv"+$(this).index());
			});

			$(obj).find("span").first().addClass("on");
		});



    });

	function otzivJS (obj, sl) // slider function
	{
		var ul = $(sl).find("ul");
		var bl = $(sl).find("li.part11-otziv"+obj);
		var step = $(bl).width();
		$(ul).animate({marginLeft: "-"+step*obj}, 600);
	}

	$(document).on("click", ".part11-otziv .nav1 span", function() // slider click navigate
	{
		var sl = $(this).closest(".part11-otziv");
		$(sl).find("span").removeClass("on");
		$(this).addClass("on");
		var obj = $(this).attr("rel");
		otzivJS(obj, sl);
		return false;
	});
 $(document).on("click", ".part11-otziv-navnext, .part11-otziv-navright", function(b) {
     b.preventDefault();
     b = $(".part11-otziv");
     var c = b.find(".nav1 span"),
         a = c.filter(".on");
     a.removeClass("on");
     a = +a.attr("rel");
     a += $(this).is(".part11-otziv-navright") ? 1 : -1;
     a == c.length && (a = 0);
     0 > a && (a = c.length - 1);
     c.eq(a).addClass("on");
     otzivJS(a, b);
 });

</script>
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2014, 12:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

opalsmoke,
а чем вас код из 4 поста неустроил?
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2014, 12:15
Новичок на форуме
Отправить личное сообщение для opalsmoke Посмотреть профиль Найти все сообщения от opalsmoke
 
Регистрация: 27.11.2014
Сообщений: 5

Сообщение от рони Посмотреть сообщение
opalsmoke,
а чем вас код из 4 поста не устроил?
Только сейчас заметил! Благодарю еще раз!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Яндекс.Деньги организуют в Петербурге школу для веб-разработчиков LinaKurkova Работа 0 15.05.2014 22:41
EruditionCMS - веб-приложение для создания и проведения тестирований mbcsoft Ваши сайты и скрипты 0 08.05.2014 13:12
Навигация «Вперед/Назад» для HTML файлов hdma Internet Explorer 7 09.04.2014 15:34
Посоветуйте как улучшить код для работы с history api [ jquery + js + history api ] Geo Ваши сайты и скрипты 0 12.01.2014 00:41
Удалению метаданных в JPEG lorents Библиотеки/Тулкиты/Фреймворки 2 22.04.2012 21:02