recherche

Maison >interface Web >js tutoriel >Comment utiliser du code js simple pour obtenir l'effet de défilement du carrousel ?

Comment utiliser du code js simple pour obtenir l'effet de défilement du carrousel ?

藏色散人
藏色散人original
2018-08-09 16:26:234264parcourir

L'affichage carrousel sur la page d'accueil est fondamentalement essentiel. Donc pour les novices, il peut être un peu difficile d'utiliser le js original. En fait, il n'est pas nécessaire de considérer le défilement des images comme compliqué. Le principe de mise en œuvre de l'image carrousel js peut être principalement compris comme la fusion d'images de même taille dans une colonne, mais une seule des images est affichée et les autres sont masquées. L'image affichée est modifiée en modifiant la valeur de gauche. Les images du carrousel glissent automatiquement toutes les quelques secondes pour obtenir l'effet de lecture des images à tour de rôle. En termes d'effets, il y a un glissement et une entrée progressive. Le carrousel coulissant est l'effet d'images glissant de gauche à droite, progressivement. L'image est l'effet des images qui s'affichent progressivement en fonction de la transparence.

Cet article explique donc comment utiliser js pour obtenir des effets de carrousel d'images et de glissement. J'espère qu'il sera utile aux amis dans le besoin.

Les exemples de code spécifiques pour l'implémentation js des images de carrousel sont les suivants : 

    //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)
    }

Remarque :

mouvement de l'image La fonction moveElement() doit obtenir la position actuelle et la position cible de l'image et calculer la différence entre elles pour se déplacer. Vous pouvez utiliser offsetLeft et offsetTop pour obtenir la position actuelle de l'image. L'effet de "faire glisser" l'image lors d'un déplacement est de diviser la distance en 10 fois pour le mouvement, c'est-à-dire en utilisant la fonction setTimeOut. Cependant, afin d'empêcher la souris de survoler, la fonction clearTimeout() doit être appelée. .

[Articles connexes recommandés]

Exemples détaillés de jquery pour obtenir l'effet carrousel gauche et droit

CSS3 pour implémenter l'effet carrousel

Implémentez facilement des images de carrousel avec JS

Deux façons d'implémenter des images de carrousel avec js


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css3 JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Les 4 étapes de création d'objet à l'aide du mot-clé newArticle suivant：Les 4 étapes de création d'objet à l'aide du mot-clé new

Articles Liés

Voir plus