热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

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

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



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(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呢?

请大家指点迷津。





   



推荐阅读
author-avatar
小妮子831020
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有