Here is a slider

<div class="slider"> <ul> <li><img src="http://127.0.0.1/anim/wp-content/uploads/2016/slider/cat1.jpg" alt=""></li> <li><img src="http://127.0.0.1/anim/wp-content/uploads/2016/slider/cat2.jpg" alt=""></li> <li><img src="http://127.0.0.1/anim/wp-content/uploads/2016/slider/cat3.jpg" alt=""></li> </ul> </div> $(document).ready(function() { $(".slider").each(function () { // ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слайдСр var obj = $(this); $(obj).append("<div class='nav'></div>"); $(obj).find("li").each(function () { $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляСм Π±Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ $(this).addClass("slider"+$(this).index()); }); $(obj).find("span").first().addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт мСню }); }); function sliderJS (obj, sl) { // slider function var ul = $(sl).find("ul"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ Π±Π»ΠΎΠΊ var bl = $(sl).find("li.slider"+obj); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ любой ΠΈΠ· элСмСнтов Π±Π»ΠΎΠΊΠ° var step = $(bl).width(); // ΡˆΠΈΡ€ΠΈΠ½Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠΎΡ‚ΠΊΠΈ } $(document).on("click", ".slider .nav span", function() { // slider click navigate var sl = $(this).closest(".slider"); // Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ, Π² ΠΊΠ°ΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ Π±Ρ‹Π» ΠΊΠ»ΠΈΠΊ $(sl).find("span").removeClass("on"); // ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт $(this).addClass("on"); // Π΄Π΅Π»Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ var obj = $(this).attr("rel"); // ΡƒΠ·Π½Π°Π΅ΠΌ Π΅Π³ΠΎ Π½ΠΎΠΌΠ΅Ρ€ sliderJS(obj, sl); // слайдим return false; });
  • What does the spacing mean? To be honest, I did not understand the question. - Andrew Hobbit
  • @ Jean-Claude I assume that this line sets the duration of the animation for the change of slides, and you want to set the interval for the slide show. That is, the interval at which the transition to the next slide will be launched. - Gleb Kemarsky
  • @Alexander Reyzan The code given is not enough to test the slider and test the hypotheses. Please give a link to the work page and / or list which styles and scripts you need to additionally pick up. - Gleb Kemarsky
  • In short, there is generally no interval for automatic switching of the slider without clicking the mouse, apparently this should be done by the brow. - Jean-Claude

1 answer 1

The answer to my question, maybe someone will need it)

 function moveToNext() { var curIndex = parseInt( $(".slider .nav span.on").attr("rel") ); var totalSlides = $(".slider .nav span").length; var nextIndex = curIndex + 1; if( nextIndex >= totalSlides ) { nextIndex = 0; }//if $(".slider .nav span.on").removeClass("on"); $(".slider .nav span").eq( nextIndex ).addClass("on").trigger("click"); }//moveToNext();
  • Thank you! ............. - Stack Overflow