cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Masalah carta karusel JS

<!DOCTYPE html>
<html lang="ms">
<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>

</kepala>
<badan>
<p class="pembungkus">

<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;//Tambah 5 lagi li/

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>

Saya ingin bertanya, apabila gambar itu mencapai gambar terakhir dan kemudian memaparkan gambar seterusnya, bagaimana ia tidak dapat melihat kesan peralihan di tengah dan menjadikannya serta-merta pergi ke gambar pertama?

迷茫迷茫2731 hari yang lalu578

membalas semua(2)saya akan balas

  • 三叔

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

    Anda meletakkan klon gambar pertama di hujung

    Saya menulis satu menggunakan jquery, anda boleh merujuknya

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

    Paparan kesan:

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

    balas
    0
  • 巴扎黑

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

    Anda boleh mencarinya di laman web ini, sebenarnya ramai yang bertanya tentangnya. Prinsipnya adalah penipuan visual, sama dengan struktur 5,1,2,3,4,5,1 Apabila kita sampai ke gambar kelima, kita perlu kembali ke 1. Mula-mula, kita tatal ke paling kanan 1 mengikut. animasi. Di hujung peralihan Laraskan kedudukan dengan serta-merta supaya 1 di sebelah kiri menggantikan 1 semasa. Secara ringkasnya, kedudukan 1 di sebelah kanan ialah -1920px, dan kedudukan 1 di sebelah kiri ialah 0px . Hanya apabila karusel mencapai -1920px, kedudukan dilaraskan serta-merta kepada 0px, sekali gus mencapai tujuan penipuan visual. Begitu juga dengan 1 hingga 5, cuma tukar arah

    balas
    0
  • Batalbalas