preface

There are some problems with the alipay mini program swiper component when developing. When sliding to the last item, there will be a part of blank space in the process of sliding from the last item to the first item. I want to use jquery to implement the basic functions of swiper.

Swiper rendering

Draw the style of the caroute diagram, get the total number of caroutes with JQ, create and render the caroute bottom indicator

<div class="swiper"> <! - shuffling figure - > < ul class = "inner clearfix" > < li > < img SRC = "images / 11. PNG" Alt = "" / > < / li > < li > < img SRC =" images / 22. PNG "Alt =" " /></li> <li><img src="images/33.png" alt="" /></li> <li><img src="images/44.png" alt="" /></li> <li><img src="images/55.png" alt="" /></li> </ul> <! --> < OL class="indicators clearfix"></ OL ><! - controller -- > < div class = "control" > < span class = "prev" > & lt; </span> <span class="next">&gt; </span> </div> </div>Copy the code

Gets the length of the multicast array and renders the indicator corresponding to each multicast item

var lists = $(".inner li").length $(".inner").width(100 * (lists + 1) + "%") $(".inner li").width(100 / (lists + 1) + "%") for (var i = 0; i < lists; I++) {$(" < li > < / li > "). The appendTo (". Swiper. The indicators ")} $(" indicators li "). The eq (0). The addClass (" current ") / * shuffling figure * /. Swiper ul.inner{ position: absolute; left: 0; top: 0; height: 100%; } .swiper ul.inner li{ float: left; height: 100%; } .swiper ul.inner li:hover{ cursor: move; } .swiper ul.inner li img{ width: 100%; height: 100%; } /* Indicators */. Swiper ol.indicators{position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; } .swiper ol.indicators li{ float: left; width: 5vw; height: 5vw; max-width: 15px; max-height: 15px; text-align: center; cursor: pointer; background-color: lightgray; margin: 0 3px; border-radius: 50%; border: 3px darkslategray solid; } .swiper ol.indicators li.current{ background-color: orange; border-color: #fff; }Copy the code

2. Click the bottom indicator to switch and display the current item

Define the reference value, get the distance of each displacement, when the mouse selects the indicator, change the style of the indicator, add current class to the current indicator, remove all the brothers of the current class style, the rotation of the picture corresponding to move several rotation map size.

Use jQ’s mouseEnter property to retrieve the cursor number when the user clicks on the bottom indicator dot, and animate to scroll the current index of the pointer to the wheel graph within 500ms.

var index = 0;
var step = $(".inner li").width();
$(".indicators li")
  .mouseenter(function() {
  $(this).addClass("current").siblings().removeClass("current")
  index = $(this).index()
  $(".inner").stop().animate({
    left: -index * step
  }, 500)
})
Copy the code

3. Click the mouse to manually switch the current item

1. Seamless docking

Clone the first picture to the end. So there are 6 graphs, 5 indicators.

$(".inner li").eq(0).clone(true).appendTo(".inner")
Copy the code

2. Click on the left and right to switch

Gets the distance of each displacement, that is, the width of item rotation. When clicked, the index value is increased by one and the animate animation moves for 500 milliseconds.

When the last graph is displayed, the indicator indicates the first one, and the remaining case indicator indicates the rotation item corresponding to the index value.

Define end conditions: Index values cannot keep growing. When the index value is greater than the length of the multicast array, the value is returned to zero, and the entire multicast graph is instantly returned to its place.

 $(".prev").click(function(){
        step = $(".inner li").width();
        if (index == lists) {
            $(".inner").css("left", 0)
            index = 0;
        }
        index++;
        $(".inner").stop().animate({
            left: -index * step
        }, 500)
        if (index == lists) {
            $(".indicators li").eq(0).addClass("current").siblings().removeClass("current")
        } else {
            $(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
        }
    })
Copy the code

Right click to switch

$(".next").click(function() {
  step = $(".inner li").width();
  if (index == 0) {
    $(".inner").css("left", -lists * step)
    index = lists;
  }
  index--;
  $(".inner").stop().animate({
    left: -index * step
  }, 500)
  $(".indicators li").eq(index).addClass("current").siblings().removeClass("current")
})
Copy the code

Swiper automatic rotation

The timer is used to call the event of clicking the button on the left every two seconds, so as to switch the multicast graph every two seconds.

var time = setInterval(function() {
  $(".prev").trigger('click')
}, 2000)
Copy the code

Four, manual switching and automatic rotation of the compatibility

Use hover attribute to get the state the mouse enters, clear the timer when the mouse enters, stop the rotation event to continue to call, after the mouse left to restart the cycle call switch event to achieve the rotation effect.

$(".swiper").hover(function() {
        clearInterval(time)
    }, function() {
        time = setInterval(function() {
            $(".prev").trigger('click')
        }, 2000)
    })
Copy the code