Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Автоматизация слайдера (https://javascript.ru/forum/dom-window/65149-avtomatizaciya-slajjdera.html)

insaidd 30.09.2016 15:27

РОНИ, все слайдеры которые я нашел, слишком громоздкие, с дополнительными фичами. Мне нужен простой перелистователь, я пробовал брать готовые, но они очень криво встают, то DIV летают как попало, то сценарии косячат.

Все что ты мне написал меня устраивает, просто кнопки ну очень нужны))):-?

рони 30.09.2016 15:48

бесконечная прокрутка слайдера на jquery с кнопками, макет
 
insaidd,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .slider li{
   margin: 0px;
   width: 100px; height:50px; float: left;
   display: block;

  }
 .slider .carusel {
    position:relative; top: 0px; left:0px; display:block;
    height:50px;
    padding: 0px; margin: 0px;
  }
  .slider{
     overflow:hidden; width: 200px; height:50px; position: relative;  margin: 100px auto;
  }


 .prev, .next{
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #DCDCDC;
    top: 10px;
    left: 0;
    border-radius: 50%;
    opacity: .3;
    cursor: pointer;
 }
.next{
  left: 180px;
}
.slider:hover .prev,.slider:hover .next{
  opacity: 1;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>

  $(function() {
    var ul = $(".carusel"),
        widthAll = 0,
        loop = true,
        pause = 2000,
        spide = 1200,
        next = false;
    $("li", ul).each(function(indx, element) {
        widthAll += this.offsetWidth
    });
    ul.width(widthAll);

    function go() {
        var li = next ? $("li:last", ul) : $("li:first", ul),
            w = li.width();
        next && (ul.prepend(li).css({
            left: -w
        }), w = 0);
        ul.delay(pause).animate({
            left: -w
        }, spide, function() {
            !next && ul.append(li).css({
                left: 0
            });
            loop && go()
        })
    }
    go();
    $(".slider").on("mouseenter", function() {
        loop = false;
        ul.stop()
    }).on("mouseleave", function() {
        ul.stop();
        loop = true;
        pause = 2000;
        spide = 1200;
        go()
    }).on("click", ".prev, .next", function() {
        pause = 0;
        spide = 800;
        next = $(this).is(".next");
        go()
    })
});

  </script>
</head>

<body>
<div class="slider">
	<ul class="carusel">
			<li  id = "1" style="background-color:red;">1</li>
			<li  id = "2" style="background-color:green;width: 120px;">2</li>
			<li  id = "3" style="background-color:Yellow;width: 70px; ">3</li>
            <li  id = "4" style="background-color:DeepPink;">4</li>
			<li  id = "5" style="background-color:MediumBlue;">5</li>
		</ul>
<div class="prev"><</div>
<div class="next">></div>
	</div>
</body>
</html>

insaidd 12.10.2016 11:13

РОНИ ТЫ ВОЛЩЕБНИК!!!

Булат Азат улы 09.10.2017 09:42

рони,
Не могли бы объяснить код на 68-й строке, или дать ссылку, где такой прием объясняется?
loop && go();

То есть, можно написать так:
var act = false;
function func(a, b){}
act && func(a, b);
// или
act && function(){}

И если act является false, то функция не выполняется, а если true - выполняется?

рони 09.10.2017 10:10

Цитата:

Сообщение от Булат Азат улы
И если act является false, то функция не выполняется, а если true - выполняется?

да
Цитата:

⚠Не используйте && вместо if
:)
подробнее ниже по ссылке
&&


Часовой пояс GMT +3, время: 20:19.