suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript – JS-Karusselldiagrammproblem

<!DOCTYPE html>
<html lang="en">
<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;//Füge 5 weitere li/

hinzu 
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>

Ich würde gerne fragen: Wenn das Bild das letzte Bild erreicht und dann das nächste Bild anzeigt, wie kann es dann sein, dass es den Übergangseffekt in der Mitte nicht sieht und sofort zum ersten Bild wechselt?

迷茫迷茫2732 Tage vor583

Antworte allen(2)Ich werde antworten

  • 三叔

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

    你把第一张图片 克隆 放在最后面

    我用jquery写了一个 你可以参考一下

    //初始化变量
    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();
    });

    效果展示：

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

    Antwort
    0
  • 巴扎黑

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

    你可以在站内搜一下，其实有很多人问过了。原理就是视觉欺骗，类似 5,1,2,3,4,5,1这样的结构，我们到第5张图的时候要回到1，首先按照动画滚动到最右边那个1，在transitionend的时候瞬间调整位置让左边的那个1替代当前的这个1. 简单点讲就是右边的那个1的位置为 -1920px,左边那个1的位置为0px。就是在轮播到-1920px的时候瞬间将位置调整为0px，这样就达到了视觉欺骗的目的。同理1到5也是一样的，换个方向而已

    Antwort
    0
  • StornierenAntwort