phpstudy集成环境

 首页 > 网上搜的jquery轮播图代码的疑问？

网上搜的jquery轮播图代码的疑问？

demo在这http://jsfiddle.net/ypv2g2b8/

$(function(){
   //滚动广告
    var len = $(".num > li").length;
    var index = 0;  
    var adTimer;
    $(".num li").mouseover(function() {
        index = $(".num li").index(this); 
        showImg(index);
    }).eq(0).mouseover();
    //滑入停止动画，滑出开始动画.
    $('#scrollPics').hover(function() {
        clearInterval(adTimer);
    }, function() {
        adTimer = setInterval(function() {
            showImg(index)
            index++;
            if (index == len) {       //最后一张图片之后，转到第一张
                index = 0;
            }
        }, 3000);
    }).trigger("mouseleave");
    function showImg(index) {
        var adHeight = $("#scrollPics>ul>li:first").height();
        $(".slider").stop(true, false).animate({
            "marginTop": -adHeight * index + "px"    //改变 marginTop 属性的值达到轮播的效果
        }, 1000);
        $(".num li").removeClass("on")
            .eq(index).addClass("on");
    }
});

1，第一个疑问是这个轮播图是怎么运行起来的？他的定时器是写在hover方法中的。没有hover元素怎么会在加载时就运行呢？
2， $(".num li").mouseover事件后面加.eq(0).mouseover();是什么意思呢？
3，showImg方法中为什么要先stop一下在运行animate？
"marginTop": -adHeight * index 为什么要是负的adHeight乘以index呢？

请大家指点迷津。

用负值是因为他用marginTop的形式，图片是从上往下排列，负的就是往上滑动的意思；用那个hover来触发是为了，鼠标不放在图片上，图片每个3秒自动切换，鼠标放在了图片上，则停止切换图片

用css3的animation，几行css就够了...

补充楼上，stop是为了停掉上一次没完执行的动画，比如你很快的连续按很多次下一页，就会出现动画错乱的bug，这里的stop就是为了处理这个bug

1.trigger("mouseleave") 触发了 timer
2.触发0th li的mouseover的时间帮顶
3.控制显示哪张图片的， stop不知道，很少写js动画

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>
<div 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>
</div>
</body>
</html>
【热门文章】
【热门文章】