Навигация для слайдера
Используется готовый способ реализации слайдера на сайте отсюда. Мне нужно реализовать всего две кнопки навигации - вперед / назад. Для навигации запланировал использовать кнопки со стилями в нужном мне расположении
<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>
Естественно не работает, но вопрос, в правильном ли я двигаюсь направлении? ПАМАГИТЕ МНЕ!:help: :help: :help: |
|
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>
|
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>
|
Восхитительно! Благодарю вас за оказанную мне помощь!
|
У меня возникла еще одна проблема. Пытаюсь разместить два подобных слайдера на одной странице - не работают! Пытался изменить название классов для второго слайдера, но тщетно.
<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>
|
opalsmoke,
а чем вас код из 4 поста неустроил? |
Цитата:
|
| Часовой пояс GMT +3, время: 05:12. |