自己用jq写的图片轮播有个小bug自己没思路改了,大神看下给点思路

fantasy525
  • 567

这个问题感觉描述不出来啊,就是在倒数第二张图片时双击按钮后,图片切换时会有卡一下,不仔细看看不出来,分析原因是我代码里面写的当达到临界值时left值归0导致的,但是这个又必须得写,所以没有思路了,请大神帮看下吧点击查看代码效果

## 标题文字 ##<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <style>
        .wrap{
            margin:0 auto;
            width:750px;
            height:500px;
            overflow:hidden;
            position:relative;
        }
        .inner{

            width:5250px;
            position:absolute;


        }
        .inner img{

            float:left;
            overflow: hidden;
        }
        .bt{
            width:38px;
            height:58px;
            position:absolute;
            display:block;
            background-color:orange;
        }
        .left{
            left:10px;
            top:250px;
            background:url("http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193842liilfq8gdfoctfvt.png")rgba(170,170,170,0.5) 0px -2px no-repeat;
        }
        .right{
            left:703px;
            top:250px;
            background:url("http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193842fonxk01n91ar09xb.png")rgba(170,170,170,0.5) 0px 0px no-repeat;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="inner">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193842nkj1sbdqb6jdsk7b.jpg" alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193844r22nww03bdrgm2nb.jpg" alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193844vwdddzttyxgytscs.jpg"  alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193845rp7kkxq4h4v4g4qk.jpg" alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193845oka1le1yw1aew11a.jpg" alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193845mqvaqbb6j6maqamb.jpg" alt="">
        <img src="http://cdn.attach.w3cfuns.com/notes/pics/201609/19/193842nkj1sbdqb6jdsk7b.jpg" alt="">
    </div>
    <span class="bt left"></span>
    <span class="bt right"></span>
</div>
<script>
    function animate(offset){
            $('.inner').stop().animate({
                left:offset+"px"
            },500);
    }
    var timer;
    var v=0;
    function moveR(){
        $('.right').click();

    }
    $(".right").click(function(){
        v++;
        console.log(v);
        if(v>6){
            $('.inner').css({
                left:"0px"
            })
            v=1;
        }
       animate(v*-750);
    })
    $('.left').click(function(){
        v--;
        console.log(v);
        if(v<0){
            $('.inner').css({
                left:"-4500px"
            })
            v=5;
        }
        animate(v*-750);
    })
    function autoPlay(){
        timer=setInterval(moveR,2000);
    }
    autoPlay();
    $('.wrap').mouseover(function(){
        clearInterval(timer);
    })
    $('.wrap').mouseout(function(){
        autoPlay();
    })
</script>
</body>
</html>[/code]
回复
阅读 2.3k
1 个回答
边城
  • 53.7k

双击……因为你后面只缓冲了一张图片,双击要切换两张,所以就有可能出问题

有两个办法

一个是禁止双击,在动画中判断一个动画没结束的时候禁止执行下一次动画。相应的你所有点击操作都要去进行检查,如果动画没执行成功就不能去改变序号。

第二个办法就是加两个图片缓冲,动画顺序执行,执行完之后再设置 left 到第1张或第2张图(你现在好像是执行前改的 left)

处理了一下向右的情况

只处理了向右,没处理向左,向左只是要改下计算

$(".right").click(function() {
    v++;
    console.log(v);
    // if (v > 6) {
    //     $(".inner").css({
    //         left: "0px"
    //     });
    //     v = 1;
    // }
    animate(v * -750);
});
var WIDTH = 750;
var COUNT = 6;
var TOTAL = 750 * 6;
var TIME = 500;

function animate(offset) {
    // 只考虑了右移出界的情况,左移出界类似

    var inner = $(".inner");
    var left = inner.position().left;

    // 如果偏移未到底,正常执行动画
    if (offset >= -TOTAL) {
        inner.stop().animate({
            left: offset + "px"
        }, TIME);
        return;
    }

    // 下面是偏到底并过头的情况

    // 先算出来到底剩余多少量
    var rest = left + TOTAL;
    // 以及到底之后还需要偏移多少量
    var more = -offset - TOTAL;

    // 根据上面的比较把 TIME 分成两个部分
    var t1 = ~~(TIME * rest / (rest + more));
    var t2 = TIME - t1;
    console.log(rest, more, t1, t2);

    // 执行第一个动画,把剩余未移动完的部分移动完
    inner.stop().animate({
        left: -TOTAL + "px"
    }, t1, function() {
        // 第一个动画完成之后会调用这个回调
        // 这个时候先重置 inner 位置
        v = 1;
        inner.css("left", "0px")
            // 再执行另一个动画完成剩下需要偏移的部分
            .animate({
                left: -more + "px"
            }, t2);
    });
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏