Показать сообщение отдельно
  #10 (permalink)  
Старый 19.05.2014, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Простейшая карусель на jquery
Lodas,
не хотите тайну выдавать, тогда дальше сами
<!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>
Ответить с цитированием