Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » JS, прокрутка блока фотографий

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Здравствуйте,
вот есть код
 

Код:
 
var video_images = new Array('http://cs523309.vk.me/u223117516/video/l_816fdb2e.jpg',
'http://cs533307.vk.me/u223117516/video/l_68b7cee6.jpg',
'http://cs529314.vk.me/u223117516/video/l_9a22ba29.jpg'); //картинки для прокрутки.
 
var slide_max = 3; //Макс. количество картинок.
var slide = 0;
 
function slider_video(id)
{
    if(id > slide_max || id == slide_max)
        id = slide = 0;
    
    if(id > slide_max-2)
    {
        slide = slide_max;
        
        document.getElementById("slider_video_1").innerHTML = "<img alt=\"\" src=\""+ video_images[slide_max-1] +"\" width=\"300\" height=\"200\"/>";
        document.getElementById("slider_video_2").innerHTML = "<img alt=\"\" src=\""+ video_images[0] +"\" width=\"300\" height=\"200\"/>";
    } else if(id < 0) {
        slide = slide_max-1;
        document.getElementById("slider_video_1").innerHTML = "<img alt=\"\" src=\""+ video_images[slide_max-1] +"\" width=\"300\" height=\"200\"/>";
        document.getElementById("slider_video_2").innerHTML = "<img alt=\"\" src=\""+ video_images[0] +"\" width=\"300\" height=\"200\"/>";
    } else {
        document.getElementById("slider_video_1").innerHTML = "<img alt=\"\" src=\""+ video_images[id] +"\" width=\"300\" height=\"200\"/>";
        document.getElementById("slider_video_2").innerHTML = "<img alt=\"\" src=\""+ video_images[id+1] +"\" width=\"300\" height=\"200\"/>";
    }
    return false;
}
 
function slider_video_page(i) // событие кнопки, вперёд и назад.
{
    if(i == 0) slide--;
    else if(i == 1) slide++;
    return slider_video(slide);
}

 

Код:
 
<a onclick="return slider_video_page(0);" id="beck">‹</a> //Кнопка назад
 
<div class="slider"><div id="slider_video_1"></div> <div id="slider_video_2"></div></div>
<script type="text/javascript">slider_video(0);</script>
 
<a onclick="return slider_video_page(1);" id="next">›</a> //Кнопка дальше
 

 
Код вроде как, работает почти хорошо.
Но бывает заглючивает... т.е. если крутить крутить в перёд, а оптом назад, и т.д. туда-сюда, то бывает заглючивает код...
можете помочь подправить, или переделать код?
 
Как работает:
получается, в блоке показано 2 картинки.
Если нажать, на "Дальше" то в блоке, картинка которая была на 2 месте, перемещается на 1 место, а в месте 2 появляется картинка 3. и так дальше, т.е. смещаемся на 1 картинку в лева.
Аналогично и с кнопкой "Назад", смещаемся на 1 картинку вправо.
 
Если получается так, что мы дошли до конца, то после последней картинки показывать первую картинку. Также и если назад, т.е. мы стоим на первой картинке, и нажимаем "Назад", то мы открываем последнею картинку...
Другими словами, последовательный бесконечный по круговой просмотр картинок.

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 16:45 31-01-2014 | Исправлено: Sutar, 16:56 31-01-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Лучше, все же, видеть когда доходят до конца, чтобы не сбивать с толку повторением.
Например так - http://jsfiddle.net/4At7v/
 
html
 
css
 
js + jquery

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 01:12 01-02-2014 | Исправлено: Cheery, 01:13 01-02-2014
Sutar



BANNED
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Просто я делаю не для себя, а заказчику. А это его требования... Можете помочь с моим?
и если можно, повторить такой-же эффект прокрутки, как вы сделали в своем коде. Спасибо большое

Всего записей: 1150 | Зарегистр. 15-08-2011 | Отправлено: 19:24 01-02-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Sutar

Цитата:
А это его требования

ай
ну тогда нужно добавить в конец и начало сколько показывается картинок - 1, а затем, в нужный момент, просто перекидывать из конца в конец без анимации.
 
что то такое
http://jsfiddle.net/4At7v/2/
но оно будет глючить при быстрых кликах (так как становятся в очередь анимации).
у меня нет желания сейчас с этим разбираться
 
ps: в принципе можно сделать так
http://jsfiddle.net/4At7v/4/
 

Код:
var video_images = new Array(
    'http://cs523309.vk.me/u223117516/video/l_816fdb2e.jpg',  
    'http://cs523309.vk.me/u223117516/video/l_816fdb2e.jpg',  
    'http://cs533307.vk.me/u223117516/video/l_68b7cee6.jpg',  
    'http://cs533307.vk.me/u223117516/video/l_68b7cee6.jpg',  
    'http://cs529314.vk.me/u223117516/video/l_9a22ba29.jpg',
    'http://cs529314.vk.me/u223117516/video/l_9a22ba29.jpg'
);
 
var show = 2, width = 300, dv = $('.slider div'), transition = 200;
 
$('#back').click(function(){
    dv.stop(true,true).animate({marginLeft: '-=' + width + 'px'}, transition, function(){
    if (parseInt(dv.css('margin-left')) <= - (video_images.length - show) * width)
        dv.css({marginLeft: '0px'});    
    });
    return false;
});
 
$('#next').click(function(){
    dv.stop(true,true).animate({marginLeft: '+=' + width + 'px'}, transition, function(){
     if (parseInt(dv.css('margin-left')) >= 0)
        dv.css({marginLeft: - (video_images.length - show) * width + 'px'});        
    });
    return false;
});
 
$('.slider').css({width: show * width + 'px'});
 
video_images.push(video_images.slice(0, show - 1));
video_images.unshift(video_images.slice(-2 * (show - 1), - (show - 1)));
 
$.each(video_images, function(i, val) {
    dv.append($('<img>').attr('src', val));    
});

 
есть, правда, все равно небольшй глюк на стыке, если менять направление.. додумайте.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:14 01-02-2014 | Исправлено: Cheery, 01:07 02-02-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » JS, прокрутка блока фотографий


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru