Навигатор слайдера
Доброго времени суток, в процессе изучения js пишу простой слайдер и возникла проблема с навигатором слайдера. Идея такая чтобы при нажатии на определенный элемент навигатора запускать определенное количество раз функцию next или prev, но не хватает умений, чтобы отследить текущий элемент миниатюры и запустить определенное количество раз функцию next или prev. Так же есть вопрос с параметром функции, с тем чтобы запустить ее со своим временем, насколько я догадываюсь в самом функции нужно сделать проверку на то задан ли параметр, если не задан приравнять t=1000, пробовал сделать с помощью .is(), не получилось, возможно есть какой то стандартный прием для этого, не смог догадаться.
html css
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Новый проект</title>
<link href="css/styles.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/scriptSL.js"></script>
</head>
<body>
<div class='slider'>
<div class="slitem"><img src="first.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="second.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="third.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="forth.jpg" class="slitemimg" alt=""/></div>
<div class="slitem"><img src="fifth.jpg" class="slitemimg " alt=""/></div>
<div class="slbtnnext"></div>
<div class="slbtnprev"></div>
<div class="slmiall">
<div class="slmi" > </div>
</div>
</div>
</body>
</html>
<style>
.slider{
position:absolute;
width:500px;
left:33.3333%;
height:300px;
ooooverflow:hidden;
}
.slitem{
position:absolute;
width:inherit;
float:left;
}
.slitemimg{
width:inherit;
}
.slitem.dd{
right:-500px;
}
.slbtnnext{
width:20px;
height:90px;
position: absolute;
right:0;
bottom:0;
top:0;
cursor: pointer;
margin:auto;
background: grey;
}
.slbtnprev{
width:20px;
height:90px;
position: absolute;
left:0;
bottom:0;
top:0;
cursor: pointer;
margin:auto;
background: grey;
}
.slsd{
right:-500px;
}
.slsdl{
left:-500px;
}
.slmi{
width:10px;
height:10px;
background: grey;
float:left;
margin-right:3px;
}
.slmiall{
width:500px;
height:30px;
position: absolute;
bottom:0;
margin:auto;
margin-left: 45%;
margin-right: 30%;
}
.slmialla{
border:solid 1px black;
}
.slnone{
display: none;
}
</style>
js
$(function() {
var $slider=$('.slider');
var $sliderwidth=$('.slider').width();
var $sliderItem=$('.slitem');
var $slnext=$('.slbtnnext');
var $slprev=$('.slbtnprev');
var $minia=$('.slmi');
var m=[]
var i=0;
var n=0;
$sliderItem.not( $sliderItem.eq(0)).addClass("slsd");
for(n=0;n<$sliderItem.length;n++){
m[n] = $minia.clone(true);
$('.slmiall').append(m[n]);
}
//$minia.addClass('slnone');
m[i].addClass('slmialla');
var isRun=false;
$slnext.on('click', next = function(t){
t=1000;
if(isRun){
return
}
isRun=true;
$sliderItem.eq(i-1).css('right', -$sliderwidth);
$sliderItem.eq(i).animate({left: -$sliderwidth}, t, function(){$sliderItem.eq(i-1).css({'right':-$sliderwidth,'left':'auto'});} );
m[i].removeClass('slmialla');
i++;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
//$sliderItem.eq(i-1).css({'right':-$sliderwidth,'left':'auto'});
if(i>$sliderItem.length-1){
i=0;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
}
m[i].addClass('slmialla');
});
$slprev.on('click', function prev(t){
t=1000;
if(isRun){
return
}
isRun=true;
$sliderItem.eq(i-1).css('left', -$sliderwidth);
$sliderItem.eq(i).animate({left: $sliderwidth}, t,function(){$sliderItem.eq(i-1).css({'right':$sliderwidth,'left':'auto'});});
m[i].removeClass('slmialla');
i--;
$sliderItem.eq(i).animate({left: '0'}, t,function(){isRun=false});
if(i<0){
i = $sliderItem.length - 1;
}
m[i].addClass('slmialla');
});
timeSlide=next;
// setInterval(timeSlide,2000)
});
|
Igor710,
заведите переменную для индекса активной картинки и меняйте только её. функций должно быть только две, одна изменить индекс, вторая показать картинку с этим индексом. |
Цитата:
$('.slitem').each(function(indx){ b=$sliderItem.eq(indx); console.log(b); }) Я так понимаю, две функции надо повесить на клик элемента навигатора, его же для этого тоже нужно перебрать? И не совсем понятно как сделать функцию показа картинки с нужным индексом, например если индекс нужной картинки меньше текущего, то нужно выходит применить функцию prev количеством равным разности этих двух индексов? |
|
Цитата:
|
slide карусель готовый вариант
Igor710,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
background-color: #D3D3D3
}
#wrapper{
margin:50px auto;
width:640px;
}
#carousel{
display:block;
position:relative;
}
li{
list-style:none;
display:none;
position:absolute;
}
#carousel li:first-child{
display:block;
}
#cl_left,#cl_right{
width:50px;
height:50px;
position:absolute;
z-index:10;
top:150px;
opacity:.5;
cursor:pointer;
background-repeat:no-repeat;
background-size:100% 100%;
}
#cl_left:hover,#cl_right:hover{
opacity:1;
}
#cl_left{
left:10px;
background-image:url(https://www.gentec-eo.com/Content/images/home/slider/left-arrow.png);
}
#cl_right{
right:20px;
background-image:url(https://www.gentec-eo.com/Content/images/home/slider/right-arrow.png);
}
.buttons{
position:relative;
}
#thumbs-wrapper{
position:relative;
margin:0 auto;
top:405px;
text-align:center;
}
#thumbs-wrapper img{
border:1px solid #FFFFFF;
box-sizing: border-box;
margin:4px;
width: 65px;
height: 40px;
border-radius: 4px;
}
#thumbs-wrapper .selected img{
border:2px solid #000000;
}
#carousel img{
border-radius: 12px;
border:2px solid #FFFFFF;
width: 650px;
height: 400px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="wrapper">
<div class='buttons'>
<div class="left" id="cl_left"></div>
<div class='right' id="cl_right"></div>
</div>
<ul id="carousel">
<li id="1jpg"><img src="http://v-leto.ru/wp-content/uploads/2015/11/indoneziya-1-e1446822043453.jpg" /></li>
<li id="2jpg"><img src="http://cdn2.insidermonkey.com/blog/wp-content/uploads/2015/07/shutterstock_100200350.jpg" /></li>
<li id="3jpg"><img src="http://www.breeze.ru/files/images/papua-new-guinea.jpg" /></li>
<li id="4jpg"><img src="http://www.vedomosti.md/uploads/articles.53253.m.jpg" /></li>
<li id="5jpg"><img src="https://d1x3cbuht6sy0f.cloudfront.net/sales/2751/5e0dd9a7_564e_4d14_be31_71965fd8e463.jpg" /></li>
<li id="6jpg"><img src="http://www.unextour.ru/Pictures/Guide/ct1098_1608301451595599.JPG" /></li>
</ul>
<div id="thumbs-wrapper">
<div id="thumbs">
<a href="#1jpg" class="selected"><img src="http://v-leto.ru/wp-content/uploads/2015/11/indoneziya-1-e1446822043453.jpg" /></a>
<a href="#2jpg"><img src="http://cdn2.insidermonkey.com/blog/wp-content/uploads/2015/07/shutterstock_100200350.jpg" /></a>
<a href="#3jpg"><img src="http://www.breeze.ru/files/images/papua-new-guinea.jpg" /></a>
<a href="#4jpg"><img src="http://www.vedomosti.md/uploads/articles.53253.m.jpg" /></a>
<a href="#5jpg"><img src="https://d1x3cbuht6sy0f.cloudfront.net/sales/2751/5e0dd9a7_564e_4d14_be31_71965fd8e463.jpg" /></a>
<a href="#6jpg"><img src="http://www.unextour.ru/Pictures/Guide/ct1098_1608301451595599.JPG" /></a>
</div>
</div>
</div>
<script>
$(function() {
var $li = $("#carousel li"),
len = $li.length,
$next = $("#cl_right"),
$prev = $("#cl_left"),
$thumbs = $("#thumbs a"),
direction = ["right", "left"],
spide = 1600,
pause = 0,
next = 1,
num = 0;
function func(event) {
$li.eq(num).stop(true, true).delay(pause).hide("slide", {
easing: "easeInOutQuad",
direction: direction[0]
}, spide);
$li.eq(next).stop(true, true).delay(pause).show("slide", {
easing: "easeInOutQuad",
direction: direction[1]
}, spide)
}
function setNum() {
$thumbs.removeClass("selected").eq(next).addClass("selected");
func();
num = next
}
$next.on({
click: function() {
next = (num + 1) % len;
direction = ["left", "right"];
setNum()
}
});
$prev.on({
click: function() {
next = num - 1;
next < 0 && (next = len - 1);
direction = ["right", "left"];
setNum()
}
});
$thumbs.on({
click: function(event) {
event.preventDefault();
next = $thumbs.index(this);
direction = next > num ? ["left", "right"] : ["right", "left"];
setNum()
}
})
});
</script>
</body>
</html>
|
Рони, слайды листаются только вторым нажатием. после первого круга листать перестает (опера) другими не пробовал.
|
j0hnik,
заменил jquery - проверь |
Рони, все ок ;)
|
| Часовой пояс GMT +3, время: 20:34. |