Форум

Spark89 · #1 (**permalink**) 11.10.2015, 22:03

Здравствуйте, нужно реализовать бесконечную прокрутку по типу http://www.tn3gallery.com/examples/default/ или https://www.script-tutorials.com/dem...x.html#photo20 . Можно использовать jquery, обязательна поддержка IE9, height изображений одинаковая, width разнится.

У меня есть модальное окно, 9 картинок. В окне помещается только 5. Остальное надо двигать. Второй день уже сижу над этой задачей

...

Выделил код с проекта. Вот http://файлообменник.рф/dnfrnjenlfrm/Проект.rar.html

PS: плагины не предлагать

.

рони · #2 (**permalink**) 11.10.2015, 22:15

Сообщение от Spark89

плагины не предлагать

напишите тогда свой

Spark89 · #3 (**permalink**) 11.10.2015, 23:41

Цитата:

напишите тогда свой

Без проблем, Вы мне только прокрутку подскажите

.

рони · #4 (**permalink**) 12.10.2015, 00:04

Spark89,
делайте макет, пока непонятно что вы хотите сделать и в чём проблема.

Spark89 · #5 (**permalink**) 12.10.2015, 11:34

Залил код. Лишнее в <ul> можно спрятать при помощи overflow: hidden. Но как реализовать прокрутку я не знаю. Пробовал реализовать через .animate({marginLeft: }, "slow", "swing"), но возникла проблема с остановкой сдвига в нужном месте... Вообщем вроде всё перепробовал, может что-то подскажите?)

рони · #6 (**permalink**) 12.10.2015, 11:40

Spark89,
а можно ваш макет прямо тут разместить ... ниже образец

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;
  }
  #carusel {
    position:relative; top: 0px; left:0px; display:block;
    width: 500px; height:50px;
    padding: 0px; margin: 0px;
  }
  div{
     overflow:hidden; width: 400px; height:50px; position: relative; left: 100px
  }

  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
$(function () {
    function go() {
        $('#carusel').delay(3000).animate({
            left: '-=100'
        }, 2000, function () {
            $('li:first').appendTo($(this))
            $(this).css({
                left: '0px'
            });
            go()
        })
    }
    go()
})
  </script>
</head>

<body>
<div>
		<ul id="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;">2</li>
			<li  id = "3" style="background-color:Yellow;">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
	</div>
</body>
</html>

Spark89 · #7 (**permalink**) 12.10.2015, 12:12

Ну это справедливо, если у меня все <li> имеют одинаковый width и height, но в реальности у меня только height одинаковый. Также у меня есть стрелки влево/вправо.

рони · #8 (**permalink**) 12.10.2015, 12:34

Сообщение от Spark89

Ну это справедливо, если у меня все <li> имеют одинаковый width и height

выше это демонстрация форума, а не вариант решения
ниже ссылка где почитать про теги, нужен макет, ничего лишнего только основное ... и ваш случай не первый на форуме искать нужно ...вместо left: '-=100' будет подсчёт на сколько сдвинуть.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Spark89 · #9 (**permalink**) 12.10.2015, 12:42

Я уже понял как нужно решить свою проблему. Огромное спасибо!

Форум

Справочник

Discord чат

Курсы javascript