1-11问题

来源：1-13 作业题

qq_一个人一個人_0

2018-08-05 07:01:40

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="CSS/yang.css">
</head>

<body>
    <div class="box">
        <div class="word">jQuery实现轮播图</div>
        <div class="pic">
            <img src="作业素材/1.jpg" alt="123" class="img pactive">
            <img src="作业素材/2.jpg" alt="123" class="img">
            <img src="作业素材/3.jpg" alt="123" class="img">
            <img src="作业素材/4.jpg" alt="123" class="img">
            <img src="作业素材/5.jpg" alt="123" class="img">
            <div class="you"><img src="作业素材/pre.png" alt="you"></div>
            <div class="zuo"><img src="作业素材/pre2.png" alt="zuo"></div>
            <div class="yuan">
                <span class="aa active"></span><span class="aa"></span><span class="aa"></span><span class="aa"></span><span class="aa"></span>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="JS/jac.js"></script>
</body>
</html>

$(function() {
        var main = 0,    //jQuery对象集合索引
            p = null,
            b = $('.img'),
            m = $('.you'),
            n = $('.zuo'),
            span = $('.yuan > span');

            //清除定时器
        $('.pic').mouseenter(function() {
            if (p) {
                clearInterval(p);
            }
        });

            //设置定时器
        $('.pic').mouseleave(function() {
            p = setInterval(function() {
                main++;
                if (main >= b.length) {
                    main = 0;
                }
                changeImg();
            }, 2000);
        });
        $('.pic').mouseleave();//进入页面就触发自动轮播

            //右边的按钮点击切换图片
        m.on('click', function() {
            main++;
            if (main >= b.length) {
                main = 0;
            }
            changeImg();
        })

            //左边的按钮点击切换图片
        n.on('click', function() {
            main--;
            if (main < 0) {
                main = b.length - 1;
            }
            changeImg();
        })

        	//圆点点击切换图片
        span.click(function() {
        	main = $(this).length;
        	changeImg();
        })

            //图片切换函数
        function changeImg() {
            b.removeClass('pactive');
            b.eq(main).addClass('pactive');
            span.removeClass('active');
            span.eq(main).addClass('active');
        }
    });

老师，为什么我这个圆点点击事件没效果呢，b.length和span.length不都是jquery对象集合的属性吗，怎么一个有用一个没用呢

写回答

1回答