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

发布于 2022-09-03 18:58:52 字数 3422 浏览 27 评论 0

这个问题感觉描述不出来啊，就是在倒数第二张图片时双击按钮后，图片切换时会有卡一下，不仔细看看不出来，分析原因是我代码里面写的当达到临界值时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]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

世界和平 2022-09-10 18:58:52

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

有两个办法

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

第二个办法就是加两个图片缓冲，动画顺序执行，执行完之后再设置 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);
    });
}

回复收藏 0

~没有更多了~