Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2017, 11:10
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Cдвиг изображения по клику влево-вправо (по кругу)
Подскажите пожалуйста...
Есть изображения заключенные в див размером в 500px, как сделать так, что бы изображения влево или в право (в зависимости от нажатия на соответствующую кнопку) по кругу или хотя бы как тут
http://tulios.github.io/jquery.silver_track/ (когда последняя картинка, изображения не двигается)

<div id="block">
<img class="t" data-u="thumb" src="http://bears.loc/wp-content/uploads/2017/05/twin_4_.jpg" style="margin-left: 0px;">
<img class="t" data-u="thumb" src="http://bears.loc/wp-content/uploads/2017/05/twin_4_.jpg" style="margin-left: 0px;">
<img class="t" data-u="thumb" src="http://bears.loc/wp-content/uploads/2017/05/twin_4_.jpg" style="margin-left: 0px;">
<img class="t" data-u="thumb" src="http://bears.loc/wp-content/uploads/2017/05/twin_4_.jpg" style="margin-left: 0px;">
</div>
<span class="left-tb">Влево</span> 
<span class="right-tb">Вправо</span



<script>
$(document).ready(function() {  
   $('.left-tb').click(function() {
        $('#block').animate({
        'marginLeft' : "-=145px" 
        });
    });
    $('.right-tb').click(function() {
        $('#block').animate({
        'marginLeft' : "+=145px" 
        });
    });
});
</script>

<style>
#block {
width: 500px;
overflow: hidden;
}
</style>

Последний раз редактировалось ami_moor, 13.06.2017 в 11:55.
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2017, 11:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от ami_moor
как сделать так, что бы изображения влево или в право (в зависимости от нажатия на соответствующую кнопку) по кругу
Куча вариантов...
http://www.internet-technologies.ru/...icle_2279.html
http://followdesign.com/development/...y-chast-1.html
Из букваря...
https://learn.javascript.ru/task/carousel
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2017, 11:35
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Сообщение от Rise Посмотреть сообщение
ami_moor, а твоя локальная ссылка нам как поможет, кроме того что мы узнали что профиль твой admin?
Наглядный пример, что я имею в в виду
Ответить с цитированием
  #4 (permalink)  
Старый 13.06.2017, 11:56
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Сообщение от Rise Посмотреть сообщение
ami_moor, ясно, тогда попробуй такой вариант решения file:///D:/for_ami_moor/index.html (сдвиг по кругу)
ха-ха
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение изображения по клику _alta_ Общие вопросы Javascript 2 19.04.2016 14:59
Смена фонового изображения по кругу, по клику на одну кнопку Manoftheyear Элементы интерфейса 7 21.03.2016 06:45
Смена изображения по клику и возвращение через 24 часа Валерий_M Элементы интерфейса 4 30.01.2015 21:33
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42
Прижать часть строки влево, а часть вправо - как? GRIG (X)HTML/CSS 10 15.03.2012 16:12