Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The wheel cast graph is a common component, today with JS to achieve a simple wheel cast graph.

The functions are as follows:

  1. Automatic rotation, sliding effect.
  2. The left and right arrows can realize the switch between one piece and the next piece, and make the throttling process.
  3. Click the dot below to switch to the corresponding picture.
  4. Hover the mouse over the picture or a small dot will pause the rotation, move away to continue.

The principle of

As shown above, take showing three images and switching to the next one as an example. 123 The numbers represent Figure 1, Figure 2 and Figure 3. The blue rectangular box is the visible range, that is, the range displayed in the rotation chart, and the other pictures are hidden.

  1. Status A: Initial state of the page. The first image is displayed by default.
  2. State B: Move the entire picture list to the left to display the second picture.
  3. State C: the same as state B.
  4. State D: The first picture is displayed again (but the last one for the picture list), and you need to switch to state E, the initial state. During the switching process, the left value of the whole picture list needs to be changed, and the transition time is set to 0s.
  5. It completes a cycle. Switch to the previous slide and do the same thing.

The source code

HTML
<div class="wrap">
    <div class="img-box">
        <img src="1.jpg" alt="" class="image">
        <img src="2.jpg" alt="" class="image">
        <img src="3.jpg" alt="" class="image">
    </div>
    <div onclick="prev()" class="btn left"><img src="left.png" alt="" class="arrow"></div>
    <div onclick="next()" class="btn right"><img src="right.png" alt="" class="arrow"></div>
    <ul>
        <li style="background-color: #333333;"></li>
        <li></li>
        <li></li>
    </ul>
</div>
Copy the code
JS
const imgBox = document.querySelector('.img-box')
const imgs = document.querySelectorAll('.image')
const lis = document.querySelectorAll('li')
const activeColor = '# 333333'
const defaultColor = 'rgb(204, 204, 204)'
imgBox.insertBefore(imgs[imgs.length-1].cloneNode(true),imgs[0])
imgBox.appendChild(imgs[0].cloneNode(true))
imgBox.style.transform = 'translateX(-880px)'

let now = 1
let timer = null

function next(){

    // Throttling processing
    if(! timer){ imgBox.style.transition ='1s'
        imgBox.style.transform = `translateX(-${++now*880}px)`

        for(let i = 0; i<imgs.length; i++){if(i ! = now-1){
                lis[i].style.backgroundColor = defaultColor
            }
        }
        if(now > imgs.length)
            lis[0].style.backgroundColor = activeColor
        else
            lis[now-1].style.backgroundColor = activeColor

        timer = setTimeout(() = > {
            if(now > imgs.length){
                now = 1
                imgBox.style.transition = 'none'
                imgBox.style.transform =   `translateX(-${now*880}px)`
            }
            timer = null
        }, 1000); }}function prev(){

    if(! timer){ imgBox.style.transition ='1s'
        imgBox.style.transform = `translateX(-${--now*880}px)`


        for(let i = 0; i<imgs.length; i++){if(i ! = now-1){
                lis[i].style.backgroundColor = defaultColor
            }
        }
        if(now == 0)
            lis[imgs.length-1].style.backgroundColor = activeColor
        else
            lis[now-1].style.backgroundColor = activeColor

        timer = setTimeout(() = > {
            if(! now){ now = imgs.length imgBox.style.transition ='none'
                imgBox.style.transform =   `translateX(-${now*880}px)`
            }
            timer = null
        }, 1000);
    }
}

timerInt = setInterval(next,2000)

imgBox.onmouseover = function() {
    clearInterval(timerInt)
}
imgBox.onmouseout = function() {
    timerInt = setInterval(next,2000)}for(let k=0; k<imgs.length; k++){ lis[k].onmouseover =function() {
        clearInterval(timerInt)
    }
    lis[k].onmouseout = function() {
        timerInt = setInterval(next,2000)
    }
    lis[k].onclick = function(){
        step = k + 1
        imgBox.style.transform = `translateX(-${step*880}px)`

        for(let i = 0; i<imgs.length; i++){if(i ! = k){ lis[i].style.backgroundColor = defaultColor } } lis[k].style.backgroundColor = activeColor } }Copy the code
CSS
.wrap {
    width: 880px;
    height: 305px;
    margin: 0 auto;
    /* border: 1px solid #333333; * /
    position: relative;
    overflow: hidden;
}

.img-box {
    width: 880px;
    display: flex;
    position: absolute;
}

.btn {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 305px;
    line-height: 305px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

.btn:hover {
    background-color: rgba(240.240.235.0.575);
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.arrow {
    width: 15px;
    height: 15px;
}

.wrap ul{
    padding: 0;
    list-style: none;
    width: 880px;
    height: 15px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 10px;
    z-index: 1;
}

.wrap ul li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color:rgb(204.204.204);
    margin: 0 5px;
}
Copy the code

Implementation effect

Something to watch out for

  • The purpose of adding one image at the beginning and one at the end is to have a good transition effect on the first click and to make it easier to operate behind it.
  • The black box operation of moving must be carried out after the transition is completed, so the delay setTimeout is used, and the delay === transition time.
  • To prevent users from clicking too fast, throttling must be carried out.