РОНИ, все слайдеры которые я нашел, слишком громоздкие, с дополнительными фичами. Мне нужен простой перелистователь, я пробовал брать готовые, но они очень криво встают, то DIV летают как попало, то сценарии косячат.
Все что ты мне написал меня устраивает, просто кнопки ну очень нужны))):-? |
бесконечная прокрутка слайдера на 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> |
РОНИ ТЫ ВОЛЩЕБНИК!!!
|
рони,
Не могли бы объяснить код на 68-й строке, или дать ссылку, где такой прием объясняется? loop && go(); То есть, можно написать так: var act = false; function func(a, b){} act && func(a, b); // или act && function(){} И если act является false, то функция не выполняется, а если true - выполняется? |
Цитата:
Цитата:
подробнее ниже по ссылке && |
Часовой пояс GMT +3, время: 20:19. |