“This is the 19th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article was about changing the Default Element UI style; Today we will share the js vertical and horizontal seamless rotation.

Longitudinal seamless rotation

First, the HTML structure, a large box wrapped in two sub-boxes, the first box inside the text content; The second box is empty and used to clone the contents of the first box. Note that the contents of a Box1 box must be larger than the height of the parent box or it will scroll up and down once before stopping.

< div id = "box" > < ul id = "box1" > < li > < span > 1 < / span > "Jin Gangchuan - wujing < / li > < li > < span > 2 < / span >" stray earth "- wujing < / li > < li > < span > 3, < / span > The long jin lake - wujing < / li > < li > < span > 4, < / span > "watergate bridge" - wujing < / li > < li > < span > 5 < / span > "I and my parents - wujing < / li > < li > < span > 6, < / span > The cliffs above, Zhang Yi < / li > < li > < span > 7, < / span > "a small red" - Jackson < / li > < li > < span > 8, < / span > my boy "- Jackson < / li > < li > < span > 9, < / span > "I and my sister - zifeng zhang < / li > < li > < span > 10, < / span >" the killer is not very calm "- Mary < / li > < / ul > < ul id = box2 > < / ul > < / div >Copy the code

2, there is nothing to say about CSS code

#box {
            margin:0 auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 60px;
            height: 300px;
            width: 260px;
            color: #6d0ee9;
            overflow: hidden;
            border: 1px solid rgb(19, 211, 211);
            padding: 20px;
           
        }

        #box li {
            height: 34px;
            line-height: 34px;
            overflow: hidden;
        }

        #box span {
            float: left
        }
Copy the code

3. The following describes the relevant implementation logic of JS

(1) Obtain the DOM elements needed, and then clone the box1 box content onto box2 box to prepare for the realization of seamless rotation.

var box = document.getElementById("box"); var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); InnerHTML = box1.innerHTML // Clone box1 to box2Copy the code

(2) JS to achieve seamless rotation method

If the scroll down distance is less than or equal to the scroll height of Box1, the scroll distance of box box is increased by 1, otherwise the scroll distance is 0 and the scroll bar returns to the top.

Function myScroll() {if (box.scrolltop-box1.scrollheight <= 0){box.scrolltop ++; }else { box.scrollTop = 0; }}Copy the code

(3) set the timer, initialize the value of a timer, and set the mouse to clear up the timer to stop rolling, mouse away to reset the timer.

var speed = 100;
var MyMar = setInterval(myScroll, speed) 
box.onmouseover = function () {
    clearInterval(MyMar)
    } 
    box.onmouseout = function () {
    MyMar = setInterval(myScroll, speed)
} 
Copy the code

The effect is as follows, longitudinal uniform and seamless rolling.

Horizontal seamless rotation

The structure of HTML is the same as vertical, so the code is not repeated; Also note that the box1 box is longer than the box box, otherwise it will not work.

So let’s look at the changes to the CSS code.

Width: 660px; height: 50px; color: #6d0ee9; overflow: hidden; border: 1px solid rgb(19, 211, 211); padding:0 20px; white-space: nowrap; Margin: 50px auto; // Margin: 50px auto; } #box li { display: inline-block; Margin-right: 20px; margin-right: 20px; } #box span { float: left }Copy the code

JS logic is basically the same as vertical, the only difference is that the myScroll method logic needs to change, after looking at the code you will feel that the logic is the same, just change the property value scrollTop -> scrollLeft; ScrollHeight – > offsetWidth.

function myScroll() { if (box.scrollLeft - box1.offsetWidth <= 0) { box.scrollLeft ++; } else { box.scrollLeft = 0; }}Copy the code

The effect of horizontal seamless rotation is as follows

Conclusion:

Next time we will add a detailed introduction about JS offsetWidth, offsetHeight, scrollTop, scrollLeft and so on. Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article is helpful to you and I hope you can support me more. Today is the 19th day of my participation in the first Wenwen Challenge 2022. Come on! Persistence is victory.