Форум

zahod5277 · #1 (**permalink**) 06.04.2014, 01:47

Здравствуйте!
В JS еле-еле что-то соображаю, прошу помочь.
Есть три изображения

<div id="main-slider">
                <img src="img/big-slide.jpg" class="big-slide" />
                 <div id="left-slides">
                 <img src="img/small-slide1.jpg" alt="" class="small-slides1"/>
                    <img src="img/small-slide2.jpg" alt="" class="small-slides2"/>
                    </div>
</div>

Необходимо менять их местами (каждое предыдущее становится на место перед ним, и так по кругу) через определенный промежуток времени с эффектом анимации.
Использую jQuery для обращения к элементам и изменения их свойств.
Мои попытки превращаются в огромный быдлокод, который даже страшно показывать.

рони · #2 (**permalink**) 06.04.2014, 02:33

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .Block {
   width: 400px; height:200px; float: left;
  }
  #Blocks {
    width: 1200px; height:200px;
  }

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

<body>
<div style="overflow:hidden; width: 400px; height:200px; position: relative ">
		<div id="Blocks" style="position:absolute; top: 0px; left:0px;" >
			<div class ="Block" id = "1" style="background-color:red;">1</div>
			<div class ="Block" id = "2" style="background-color:green;">2</div>
			<div class ="Block" id = "3" style="background-color:Yellow;">3</div>
		</div>
	</div>
</body>
</html>

zahod5277 · #3 (**permalink**) 06.04.2014, 02:45

Это немного не то. Нужно, чтобы все три изображения отображались на странице, одновременно. И одновременно меняли свои места.

рони · #4 (**permalink**) 06.04.2014, 02:55

zahod5277,
помедитируйте тут

Форум

Справочник

Discord чат

Курсы javascript