javascript - 网上搜的jquery轮播图代码的疑问？-PHP中文网问答

阿神2017-04-10 16:16:01 5楼

1，第一个疑问是这个轮播图是怎么运行起来的？他的定时器是写在hover方法中的。没有hover元素怎么会在加载时就运行呢？
hover第一个函数参数在 mouseenter时触发，第2个函数参数在mouseleave时触发。.trigger('mouse leave')就触发了mouseleave事件,showImage每隔3秒被执行，动起来了~~~

2， $(".num li").mouseover事件后面加.eq(0).mouseover();是什么意思呢？
$(".num li").mouseover方法绑定回调函数到$(".num li")指定的包装集的元素中并且返回包装集合..eq(0).mouseover();就是触发$(".num li")第1个元素的mouseover事件

3，showImg方法中为什么要先stop一下在运行animate？
"marginTop": -adHeight * index 为什么要是负的adHeight乘以index呢？
负值将指定位置的广告向上移动到marginTop指定的位置。因为showImage广告播放可能因为鼠标的操作行为而执行，所以需要停止之前自动定时执行的动画或".num li" mouseover而触发的动画执行序列。转而执行新的动画

==针对题主的问题及实现过程的疑问，把代码修正一下，希望对你有帮助=====

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <style>
        #scrollPics{
            height: 150px;
            width: 500px;
            margin-bottom: 10px;
            overflow: hidden;
            position:relative;
        }
        .slider li{
            float:left;

        }
        .num{
            position:absolute;
            right:5px;
            bottom:5px;
        }
        #scrollPics .num li{
            float: left;
            color: #FF7300;
            text-align: center;
            line-height: 16px;
            width: 16px;
            height: 16px;
            cursor: pointer;
            overflow: hidden;
            margin: 3px 1px;
            border: 1px solid #FF7300;
            background-color: #fff;
        }
        #scrollPics .num li.on{
            color: #fff;
            line-height: 21px;
            width: 21px;
            height: 21px;
            font-size: 16px;
            margin: 0 1px;
            border: 0;
            background-color: #FF7300;
            font-weight: bold;
        }
        img{
            width:500px;
            height:150px;
        }
        *{
            padding:0;
            margin:0;
        }
        ul,li{
            list-type:none;
        }
        .clearfix{
            zoom:1;
        }
        .clearfix:after{
            content:"";
            display:block;
            clear:both;

        }

    </style>
    <script>

        $(function(){
            //滚动广告
            var len = $(".num > li").length;
            var index = 0;
            var adTimer;
            var firstRunFlag=true;
            $(".num li").mouseover(function() {
                index = $(".num li").index(this);
                showImg(index,true);
            }).eq(0).mouseover();

            //滑入停止动画，滑出开始动画.
            $('#scrollPics').hover(function() {
                clearInterval(adTimer);
            }, function() {
                adTimer = setInterval(function() {
                    showImg(index,false)
                    index++;
                    if (index == len) {       //最后一张图片之后，转到第一张
                        index = 0;
                    }
                }, 2000);
            }).trigger("mouseleave");

            function showImg(index,noAnimateFlag) {
                //设置 noAnimateFlag 的目的为当在帧标签上切换各帧时，停止动画
                //帧标签上 移除后，恢复动画效果
                noAnimateFlag=noAnimateFlag|false;
                var adWidth = $("#scrollPics>ul>li:first").width();
                if(index===0&&firstRunFlag){
                    //复制最后1帧加到当前的第1帧前面,解决最后一帧和第1帧之间的过渡衔接问题
                    $("ul.slider li:last").clone().prependTo($("ul.slider"));
                    $(".slider").css("marginLeft",-adWidth*1+ "px" )
                    firstRunFlag=false;
                }

                if(!noAnimateFlag){
                    $(".slider").stop(true, false).animate({
                        "marginLeft": -adWidth * (index+1)+ "px"    //改变 marginTop 属性的值达到轮播的效果
                    }, 1000,function(){
                        if(index===len-1){
                            console.log(index+' on complete');
                            $(".slider").stop(true, true).css("marginLeft","0px");
                        }
                    });
                }else{
                    $(".slider").css("marginLeft",-adWidth * (index+1)+ "px");
                }

                $(".num li").removeClass("on")
                        .eq(index===len?0:index).addClass("on");


            }
        });
    </script>
</head>
<body>
<p id="scrollPics">
    <!--根据实际长度设置 ul 的宽度，这样li元素在float:left的基础，排成横排而不是默认的竖排-->
    <ul class="slider clearfix" style="width:3000px;" >
        <li><img src="http://developer.baidu.com/file/get/3081"/></li>
        <li ><img src="http://developer.baidu.com/file/get/3082"/></li>
        <li ><img src="http://developer.baidu.com/file/get/3082"/></li>
        <li ><img src="http://developer.baidu.com/file/get/3081"/></li>
        <li ><img src="http://developer.baidu.com/file/get/3082"/></li>

    </ul>
    <ul class="num" >
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</p>
</body>
</html>