Остановка слайдера если кончаются объекты
Имею написанный вручную слайдер (предложение пользоваться готовыми не актуально). Принцип работы слайдера - из базы берутся объекты(картинки) из них по ширине экрана выставляется количества объектов, Есть 2 стрелки влево и вправо, при нажатии которых линейка объектов сдвигается влево или в право, никак не могу сообразить как сделать остановку на последнем объекте.
Если по простому в базе беру 27 картинок. по ширине у меня помещаются 8 картинок, При нажатии на стрелку вправо, сладер проматывается на 8 картинок, но в конце у меня остается 3 картинки и все остальное пространство белое, как сделать что бы самая последняя картинка была с право и не было пустого пространства <script type="text/javascript"> $(document).ready(function () { var sliderObjects = $('#slider-objects'); var butParent = $('.slider-but-parent', sliderObjects); var butNext = $('.slider-but-next', sliderObjects); var listObjects = $('ul', sliderObjects); var objectWidth = 184; var _width, _placed; var corectPosition = 0; var countObject = 0; var positionPage = 0; $(window).resize(function() { _width = $(window).width(); _placed = Math.floor((_width - 122) / objectWidth); }); $(window).resize(); countObject = listObjects.children().length; listObjects.width((objectWidth * countObject) + 122); butParent.live('click', function() { var positionX = ((objectWidth + 1) * _placed); listObjects.stop().animate({ left: corectPosition + positionX, }, 500,function(){ corectPosition += positionX; console.log(corectPosition); }); }); butNext.live('click', function() { var positionX = -((objectWidth + 1) * _placed); butParent.show(); var pageObject = Math.floor(countObject / _placed); console.log(positionPage, pageObject); console.log(countObject - (pageObject * _placed)); if (positionPage <= pageObject - 1) { listObjects.stop().animate({ left: corectPosition + positionX, }, 500,'swing',function(){ corectPosition += positionX; console.log(corectPosition); positionPage ++; }); }; }); }); </script> <section id="slider-objects" class="shadow-10 open"> <a class="slider-but-parent" href="javascript: void(0);"></a> <div class="slider-overflow"> <ul style="width: 5000px"> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/2"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/3"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/4"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/5"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/6"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> <li><a href="/object/1"><img src="/uploads/objects/1/preview.png"></a></li> </ul> </div> <a class="slider-but-next" href="javascript: void(0);"></a> </section> |
допишите run в BB-тег HTML и добавьте библиотеку jQuery в начало кода
Тогда можно глянуть на действующую модель(или ссылку на тест страницу [HTML run] ... [/html] |
<!DOCTYPE html> <!-- saved from url=(0023)http://pokazdoma.local/ --> <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">@media print { .gmnoprint { display:none }}@media screen { .gmnoscreen { display:none }}</style> <meta content="charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="language" content="ru"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="description"> <meta name="keywords"> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="http://pokazdoma.local/favicon.ico"> <link sizes="16x16" rel="icon" href="http://pokazdoma.local/favicon.png"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/normalize.min.css" media="all"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/960.css" media="all"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.17012013.css" media="all"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style.css" media="0"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(1).css" media="0"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(2).css" media="0"> <link rel="stylesheet" type="text/css" href="./pokazdoma.local_files/style(3).css" media="0"> <script type="text/javascript" src="./pokazdoma.local_files/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="./pokazdoma.local_files/modernizr-2.6.2.min.js"></script> <script type="text/javascript" src="./pokazdoma.local_files/script.js"></script> <script type="text/javascript" src="./pokazdoma.local_files/plugins.17012013.js"></script> <script type="text/javascript"> /*<![CDATA[*/ var baseUrl = ""; /*]]>*/ </script> <title></title> <script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{common,util,marker,map}.js"></script><script type="text/javascript" src="chrome-extension://nhgcieglcpdegkhamigiokdphfhhnlhh/js/injected.js" charset="utf-8"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{onion}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/{controls,infowindow,overlay,stats}.js"></script><script type="text/javascript" charset="UTF-8" src="./pokazdoma.local_files/ft"></script></head> <body> <section id="navigation" class="shadow-10"> <div class="container_12"> <div class="grid_12"> <div class="left-block"> <div id="logo"> <a href="./pokazdoma.local_files/pokazdoma.local.htm"><img src="./pokazdoma.local_files/logo.png" alt=""></a> </div> <div id="city"> <script type="text/javascript"> $(document).ready(function () { var citySelect = $('#city'); var cityClick = $('.dropdown-toggle', citySelect); var cityLists = $('.dropdown-menu'); var cityDropdown = $('.dropdown > li'); var showMenu = function () { cityClick.addClass('open'); cityLists.show(); } var hideMenu = function () { cityClick.removeClass('open'); cityLists.hide(); } cityDropdown.live('mouseenter', function() { showMenu(); }).live('mouseleave', function() { hideMenu(); }); $('li > a', cityLists).live('click', function() { hideMenu(); }); }); </script> <ul class="dropdown"> <li class=""><a class="dropdown-toggle radius-5" href="javascript: void(0);">Алматы<pre class="caret"></pre></a> <ul class="dropdown-menu shadow-8-5 radius-5" style="display: none;"> <li class="item"><a href="javascript: void(0);">Алматы</a></li> <li class="item"><a href="javascript: void(0);">Астана</a></li> </ul> </li> </ul> </div> </div> <div id="main-but"> <a class="btn btn-red" href="javascript: void(0);">Разместиться</a> </div> <nav id="menu-main"> <ul> <li class="item active"><span>Карта</span><pre></pre></li> <li class="item"><a href="http://pokazdoma.local/object">Недвижимость</a></li> <li class="item"><a href="http://pokazdoma.local/agency">Агентства</a></li> </ul> </nav> </div> </div> </section> <section id="map" style="height: 896px; left: 340px; margin-right: 680px;"> <script type="text/javascript" src="./pokazdoma.local_files/js"></script><script src="./pokazdoma.local_files/main.js" type="text/javascript"></script> <script type="text/javascript" src="./pokazdoma.local_files/markerwithlabel.js"></script> <script type="text/javascript" src="./pokazdoma.local_files/markerclusterer.js"></script> </section><script type="text/javascript"> $(document).ready(function () { var sliderObjects = $('#slider-objects'); var butParent = $('.slider-but-parent', sliderObjects); var butNext = $('.slider-but-next', sliderObjects); var listObjects = $('ul', sliderObjects); var objectWidth = 184; var _width, _placed; var corectPosition = 0; var countObject = 0; var positionPage = 0; $(window).resize(function() { _width = $(window).width(); _placed = Math.floor((_width - 122) / objectWidth); }); $(window).resize(); countObject = listObjects.children().length; listObjects.width((objectWidth * countObject) + 122); butParent.live('click', function() { var positionX = ((objectWidth + 1) * _placed); listObjects.stop().animate({ left: corectPosition + positionX, }, 500,function(){ corectPosition += positionX; console.log(corectPosition); }); }); butNext.live('click', function() { var positionX = -((objectWidth + 1) * _placed); butParent.show(); var pageObject = Math.floor(countObject / _placed); console.log(positionPage, pageObject); console.log(countObject - (pageObject * _placed)); if (positionPage <= pageObject - 1) { listObjects.stop().animate({ left: corectPosition + positionX, }, 500,'swing',function(){ corectPosition += positionX; console.log(corectPosition); positionPage ++; }); }; }); }); </script> <section id="slider-objects" class="shadow-10 open"> <a class="slider-but-parent" href="javascript: void(0);" style="display: inline;"></a> <div class="slider-overflow"> <ul style="width: 5090px; left: -4440px;"> <li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li> <li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li> <li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li> <li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li> <li><a href="http://pokazdoma.local/object/1"><img src="./pokazdoma.local_files/preview.png"></a></li> </ul> </div> <a class="slider-but-next" href="javascript: void(0);"></a> </section> <section id="dock" class="shadow-10 open" style="height: 866px;"> <div class="dock-content"> <ul id="dock-menu" class=""> <li class="item active"> <div class="icons"> <span class="icon icon-cabinet"></span> <span class="icon-selected icon-cabinet-active"></span> </div> </li> <li class="item"> <div class="icons"> <span class="icon icon-bookmark"></span> <span class="icon-selected icon-bookmark-active"></span> </div> </li> </ul> <div id="panel-cabinet"> Личный кабинет </div> </div> </section> <section id="dock-filter" class="shadow-10 open" style="height: 866px;"> <div>Найти</div> </section> </body></html> |
css
/* Скроллинг объектов */ #slider-objects {position: absolute; bottom: 0; left: 0; right: 0; z-index: 10000; background: #efefef; height: 140px;} #slider-objects .slider-overflow {position: relative; overflow: hidden; margin: 0 61px; height: 140px;} #slider-objects ul {position: absolute; margin: 1px 0; padding: 0; top:0; left: 0;} #slider-objects ul li {position: relative; margin: 0 1px 0 0; width: 184px; height: 138px; overflow: hidden; float: left;} #slider-objects ul li img {width: 184px; height: 138px;} #slider-objects .slider-but-parent, #slider-objects .slider-but-next {position: absolute; display: block; width: 60px; height: 138px; top: 1px; background: #fff url('/static/images/images_sprite.png');} #slider-objects .slider-but-parent {left: 0; background-position: 0px 0px; display: none;} #slider-objects .slider-but-next {right: 0; background-position: 60px 0px;} |
Цитата:
|
Цитата:
Залить и выложить ссылкой(желательно не картинкой - раcтянет топик), можно сюда => http://uploads.ru/ alert("Пока!") |
Дело в том что объекты будут постоянно добавлятся и убираться в базе заказчиком.поэтому я думал сделать что бы скрипт просчитывал, но встал в тупике с формулой. в java я новичок
|
|
Цитата:
Установка класса последнему элементу - очень проста, var obj = $(".slider-overflow > ul > li > a > img"); var LngObj = obj.length; //Длина массива картинок obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний Хотя при клонировани до полноразмера - вродь ухищрений не нужно |
Цитата:
Попробовал класс прописывается но не срабатывает =( вот результат http://uploads.ru/7krlM.png Идея хороша. С клонированием оставлю как запасной вариант, есть мысли почему не срабатывает float? |
Цитата:
Выведите длину массива var obj = $(".slider-overflow > ul > li > a > img"); var LngObj = obj.length; //Длина массива картинок alert(LngObj); obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний Если 0 или undefined - cелектор $(".slider-overflow > ul > li > a > img") нужно заменить на $(".slider-overflow").find("a > img"); |
Цитата:
|
kulgar,
Попробуйте перезалить текущее в песочницу(ссылка в меню сайта) - потещу |
|
Цитата:
|
kulgar,
Спасибо - занят был - только почему не работает ? (К ночи гляну |
Была еще идея через .eq() прописать stop что бы анимация заканчивалась но чтот видать или я не нашел как это делать то ли это не возможно
|
kulgar,
:) Я бы пустил по кругу |
Тут как то был вариант http://javascript.ru/forum/jquery/34...tml#post228044
|
Я бы тоже воспользовался каруселью но нужно что бы останавливался (
|
kulgar,
1 Определить общую длину не скрытого контейнера со слайдами 2. Тестить смещение по сравнению с длиной, если >= .выключаем |
Пока не знаю, просто выложил в топик
<!DOCTYPE> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"/></script> </head> <body> <style> /* Скроллинг объектов */ #slider-objects {position: absolute; bottom: 0; left: 0; right: 0; z-index: 10000; background: #efefef; height: 140px;} #slider-objects .slider-overflow {position: relative; overflow: hidden; margin: 0 61px; height: 140px;} #slider-objects ul {position: absolute; margin: 1px 0; padding: 0; top:0; left: 0;} #slider-objects ul li {position: relative; margin: 0 1px 0 0; width: 184px; height: 138px; overflow: hidden; float: left;} #slider-objects ul li img {width: 184px; height: 138px;} #slider-objects .slider-but-parent, #slider-objects .slider-but-next {position: absolute; display: block; width: 60px; height: 138px; top: 1px; background: #fff url('/static/images/images_sprite.png');} #slider-objects .slider-but-parent {left: 0; background-position: 0px 0px; display: none;} #slider-objects .slider-but-next {right: 0; background-position: 60px 0px;} .EndElem {float:right;} </style> <script type="text/javascript"> $(document).ready(function () { var sliderObjects = $('#slider-objects'); var butParent = $('.slider-but-parent', sliderObjects); var butNext = $('.slider-but-next', sliderObjects); var listObjects = $('ul', sliderObjects); var objectWidth = 184; var _width, _placed; var corectPosition = 0; var countObject = 0; var positionPage = 0; var obj =$(".slider-overflow").find("a > img"); //alert(LngObj); var LngObj = obj.length; //Длина массива картинок obj.eq(LngObj-1).addClass('EndElem'); //Установили класс на последний $(window).resize(function() { _width = $(window).width(); _placed = Math.floor((_width - 122) / objectWidth); }); $(window).resize(); countObject = listObjects.children().length; listObjects.width((objectWidth * countObject) + 122); butParent.live('click', function() { var positionX = ((objectWidth + 1) * _placed); listObjects.stop().animate({ left: corectPosition + positionX, }, 500,function(){ corectPosition += positionX; console.log(corectPosition); }); }); butNext.live('click', function() { var positionX = -((objectWidth + 1) * _placed); butParent.show(); var pageObject = Math.floor(countObject / _placed); alert(positionPage+'\n' +(parseInt(+(listObjects.children(':first').width())*countObject)+ (+positionX)*(+positionPage))); alert(positionPage, pageObject); alert(countObject - (pageObject * _placed)); if (positionPage <= pageObject - 1) { listObjects.stop().animate({ left: corectPosition + positionX, }, 500,'swing',function(){ corectPosition += positionX; console.log(corectPosition); positionPage ++; }); }; }); }); </script> <section id="slider-objects" class="shadow-10 open"> <a class="slider-but-parent" href="javascript: void(0);"/>Prev</a> <div class="slider-overflow"> <ul style="width: 5090px;"> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/2"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/3"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/4"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/5"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/6"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png"/> </a> </li> <li> <a href="/object/1"> <img src="/uploads/objects/1/preview.png" class="EndElem"/> </a> </li> </ul> </div> <a class="slider-but-next" href="javascript: void(0);"/>Next</a> </section> </body> </html> |
Ну если понял правильно то общая длина не скрытого контейнера
будет вычислить (Длина объекта*Количество штук на странице)*на количество страницы (objectWidth* _placed)*(countObject - (pageObject * _placed)) |
У меня получилось сделать
http://learn.javascript.ru/play/5HxU9b но всетл теперь вопрос что бы стрелочки вперед и назад пропадали при достижения лимита тоесть дошел до конца вправо она исчезла если влево то левая исчесзла |
kulgar,
Ну ежели условие выполнилось( а проверяешь в каждом событии клика, Текущую кнопку hide(); а противоположную show() |
Никак чтот не соображу вы можите на примере показать на одной стороне?
|
kulgar,
:) А как ты остановил слайдер - нарисуй строку-условия |
if (corectObjects >=2) { // если номер страницы больше или равно 2 то выполняем условие (перематываем используя формулу общее кол-во объектов на странице умноженное на ширину объекта (+ 1px растояния между)
listObjects.stop().animate({ left: corectPosition + positionX, }, 500,null,function(){ corectPosition += positionX; positionPage ++; }); } else { // если страница больше то по формуле Оставшиеся объекты - (общее количество - (количество на странице * (количество страниц - 1) . Оставшиеся объекты * ширину + 1px console.log(listObjects.css('left')) listObjects.stop().animate({ left: corectPosition - ((countObject - (_page * _placed)) * (objectWidth+1)), }, 500,null,function(){ // corectPosition += positionlLast; // positionPage ++; //console.log(positionPage); }); }; С самого начала pageObject = 4. При нажатии справа я вычитаю 1 а слева буду прибалять 1 |
это надо было?) я просто говорю в java не силен вот методом пробы и ошибок и старой доброй математики. Ставил значения и смотрел результаты в консоли
|
kulgar,
я не знаю , нужно искать место, где он последнюю перемотку делает... и там делать смену видимости кнопок.... мне проще новый слайдер написать, :( |
Ясненько но все равно большое спасибо за помощь буду дальше разбирать )
|
Часовой пояс GMT +3, время: 05:59. |