Home > Article > Web Front-end > How to use simple js code to achieve the scrolling effect of the carousel?

How to use simple js code to achieve the scrolling effect of the carousel?

藏色散人Original: 2018-08-09 16:26:234208browse

The carousel display on the homepage is basically essential. So for novices, it may be a bit difficult to use original js. In fact, there is no need to think about image scrolling as complicated. The implementation principle of js carousel image can be mainly understood as merging images of the same size into a column, but only one of the images is displayed, and the rest are hidden. The displayed image is changed by modifying the left value. The carousel pictures automatically slide every few seconds to achieve the effect of pictures playing in turn. In terms of effects, there are sliding and gradual in. The sliding carousel is the effect of pictures sliding in from left to right, gradually in. A carousel image is the effect of images gradually displaying based on transparency.

So this article introduces how to use js to achieve image carousel and sliding effects. I hope it will be helpful to friends in need.

The specific code examples for js to implement carousel images are as follows:

    //HTML代码部分
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js实现轮播图原理及示例</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <!--从左向右滑动-->
        <nav>
            <ul id="index">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul id="img">
                <li><img src="img1.jpg" alt="img1"></li>
                <li><img src="img2.jpg" alt="img2"></li>
                <li><img src="img3.jpg" alt="img3"></li>
                <li><img src="img4.jpg" alt="img4"></li>
                <li><img src="img5.jpg" alt="img5"></li>
            </ul>
        </nav>
    <script src="script.js"></script>
    </body>
    </html>

//css代码部分
*{        margin:0;        padding:0;
    }    nav{        width: 720px;        height: 405px;        margin:20px auto;        overflow: hidden;        position: relative;
    }    #index{        position: absolute;        left:320px;        bottom: 20px;
    
    }    #index li{        width:8px;        height: 8px;        border: solid 1px gray;        border-radius: 100%;        background-color: #eee;        display: inline-block;
    }    #img{        width: 3600px;/*不给宽高无法移动*/
        height: 405px;        position: absolute;/*不定义absolute，js无法设置left和top*/
        z-index: -1;
    }    #img li{        width: 720px;        height: 405px;        float: left;
    }    #index .on{        background-color: black;
    }

//js代码部分
function moveElement(ele,x_final,y_final,interval){//ele为元素对象
        var x_pos=ele.offsetLeft;        var y_pos=ele.offsetTop;        var dist=0;        if(ele.movement){//防止悬停
            clearTimeout(ele.movement);
        }        if(x_pos==x_final&&y_pos==y_final){//先判断是否需要移动
            return;
        }
        dist=Math.ceil(Math.abs(x_final-x_pos)/10);//分10次移动完成
        x_pos = x_pos<x_final ? x_pos+dist : x_pos-dist;
        
        dist=Math.ceil(Math.abs(y_final-y_pos)/10);//分10次移动完成
        y_pos = y_pos<y_final ? y_pos+dist : y_pos-dist;
        
        ele.style.left=x_pos+&#39;px&#39;;
        ele.style.top=y_pos+&#39;px&#39;;
        
        ele.movement=setTimeout(function(){//分10次移动，自调用10次
            moveElement(ele,x_final,y_final,interval);
        },interval)
    }

Note:

The image moving function moveElement() needs to obtain the image now position and the target position and calculate the difference between them to move. You can use offsetLeft and offsetTop to get the current position of the picture. The effect of "swiping across" the picture when moving is to divide the distance into 10 times for movement, that is, using the setTimeOut function. However, in order to prevent the mouse from hovering, the clearTimeout() function needs to be called.

[Recommended related articles]

Detailed examples of jquery to achieve the left and right carousel effect

CSS3 to achieve the carousel effect

Easily implement carousel images with JS

Two ways to implement carousel images with JS

The above is the detailed content of How to use simple js code to achieve the scrolling effect of the carousel?. For more information, please follow other related articles on the PHP Chinese website!

jquery css3 JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The 4 stages of object creation using the new keywordNext article：The 4 stages of object creation using the new keyword

See more

How to use simple js code to achieve the scrolling effect of the carousel?

Related articles