recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Problème de graphique carrousel JS

<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
    *{
        margin: 0;
        padding:0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
    }
    .wrapper{
        width: 640px;
        height: 368px;
        margin: 50px auto;
        position: relative;
        overflow: hidden;
    }
    .wrapper li{
       float: left;
        width: 640px;
    }
    #list{
       /* width: 3200px;*/
        position: absolute;
    }
    .wrapper li img{
        width: 100%;
    }
    .toggle{
        width: 640px;
        height: 368px;
    }
    .toggle span{
        width: 30px;
        height: 50px;
        background:#FF9629;
        position: absolute;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
       /* display: none;*/
    }
    #prev{
        top:159px;
    }
    #next{
        top:159px;
        right:0;
    }
    nav{
        width: 640px;
        height: 20px;
        position: absolute;
        bottom:10px;
        left: 0;
        text-align: center;
        line-height: 20px;
    }
    nav span{
        width: 10px;
        height: 10px;
        background: #FFC8A0;
        border-radius: 50%;
        display:inline-block;

        margin: 0 2px;
    }
    .active{
        background: red;
    }
</style>

</head>
<body>
<p class="wrapper">

<ul id="list" style="left:0px">
    <li><a href="#"><img src="img/1.jpg"></a></li>
    <li><a href="#"><img src="img/2.jpg"></a></li>
    <li><a href="#"><img src="img/3.jpg"></a></li>
    <li><a href="#"><img src="img/4.jpg"></a></li>
    <li><a href="#"><img src="img/5.jpg"></a></li>
</ul>
<p class="toggle">
    <span id="prev"><</span>
    <span id="next">></span>
</p>
<nav id="nav">
    <span class="active"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</nav>

</p>
<script type="text/javascript">

var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var lis = document.querySelectorAll("#list li");

/ list.innerHTML += list.innerHTML;//Ajouter 5 liens supplémentaires/

var wrapper = document.getElementById("wrapper");
//动态的获取宽度
var styleN = document.createElement("style");
var text = "#list{width: "+640*lis.length+"px;}";
 text += "#list li{width: "+640+"px;}";
styleN.innerHTML = text;
document.head.appendChild(styleN);
//图片轮播逻辑
function fn(ev) {
    var nowLeft =parseInt(list.style.left)+ev;
    list.style.left = nowLeft+"px";
    list.style.transition ="1s";

   /* console.log(list.style.left);*/
    if(nowLeft < -(640*lis.length-640)){
        list.style.left = 0+"px";
    }else if(nowLeft > 0){
        list.style.left = -(640*lis.length-640)+"px";
    };

}
//自动轮播效果
var time;
play();
function play() {
    time=setInterval(function () {
        next.onclick();
    },2000)
}

//控制左右切换
prev.onclick = function () {
    fn(640);

};
next.onclick = function () {
   fn(-640);

};

</script>
</body>
</html>

Je voudrais demander, lorsque l'image atteint la dernière image puis affiche l'image suivante, comment peut-elle ne pas voir l'effet de transition au milieu et la faire passer instantanément à la première image ?

迷茫迷茫2780 Il y a quelques jours605

répondre à tous(2)je répondrai

  • 三叔

    三叔2017-06-12 09:30:53

    Vous mettez le premier clone d'image à la fin

    J'en ai écrit un en utilisant jquery, vous pouvez vous y référer

    //初始化变量
    var i=0,timer;
    //为pic追加第一张图片到末尾
    var clone=$(".pic li").first().clone();
    $(".pic").append(clone);
    var size=$(".pic>li").size();
    console.log(size);
    //动态增加按钮列表
    for(var j=0;j<size-1;j++){
        $(".btn").append("<li></li>");
    }
    $(".btn>li").eq(0).addClass("current");
    //实现按钮点击切换效果
    $(".btn>li").click(function(){
        i=$(this).index();
        $(".btn>li").eq(i).addClass("current").siblings().removeClass("current");
        $(".pic").stop().animate({"left":-i*520},200);
    });
    //设置播放函数
    function play(){
        if(i==size){
            $(".pic").css({"left":0});
            i=1;
        }
        if(i==-1){
            $(".pic").css({"left":-(size-1)*520},200);
            i=size-2;
        }
        $(".pic").stop().animate({"left":-i*520},200);
        if(i==size-1){
            $(".btn>li").eq(0).addClass("current").siblings().removeClass("current");    
        }else{        
            $(".btn>li").eq(i).addClass("current").siblings().removeClass("current");    
        }
    }
    //设置自动播放
    function autoplay(){
        timer=setInterval(function(){
            i++;
        play();
        },1000);
    }
    $(".contain").hover(function(){
        clearInterval(timer);
    },function(){
        autoplay();
    });
    setTimeout(autoplay(),1000);
    //设置左侧点击按钮事件
    $(".arrow1").click(function(){
        i++;
        play();
    });
    $(".arrow2").click(function(){
        i--;
        play();
    });

    Affichage des effets :

    https://ityanxi.github.io/seg...

    répondre
    0
  • 巴扎黑

    巴扎黑2017-06-12 09:30:53

    Vous pouvez le rechercher sur le site. En fait, de nombreuses personnes ont posé des questions à ce sujet. Le principe est une tromperie visuelle, similaire à la structure de 5,1,2,3,4,5,1. Quand on arrive à la cinquième image, il faut revenir à 1. Tout d'abord, on fait défiler vers le 1 le plus à droite selon. l'animation. À la fin de la transition Ajustez instantanément la position pour que le 1 à gauche remplace le 1 actuel. Pour faire simple, la position du 1 à droite est -1920px, et la position du 1 à gauche est 0px. . Juste au moment où le carrousel atteint -1920px, la position est instantanément ajustée à 0px, atteignant ainsi l'objectif de tromperie visuelle. Il en va de même pour 1 à 5, changez simplement la direction

    répondre
    0
  • Annulerrépondre