搜索

首页  >  问答  >  正文

javascript - JS轮播图问题

<!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;//再添加5个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>

想问一下，当图片到最后一张，再显示下一张的时候，怎么让它看不出来中间的过渡效果，让它瞬间到第一张呢？

迷茫迷茫2732 天前582

全部回复(2)我来回复

  • 三叔

    三叔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...

    回复
    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也是一样的，换个方向而已

    回复
    0
  • 取消回复