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, время: 00:48. |