https://www.airwheel.net/app/js/app.js

1$(function () {
2    /*δԪËصÄÊ×βÌí¼Ó²¹°×*/
3    var $panels = $('#slider .scrollContainer > li');
4    var $parent = $panels.parent();//»òÐíµ±Ç°liµÄ×î½üÒ»¼¶µÄ¸¸ÔªËØ
5    var $length = $panels.length;//»ñÈ¡Ö¸¶¨lengthÖµ
6    var $first = $panels.eq(0).clone().addClass("panel cloned").attr("id", 'panel_' + ($length + 1));//»ñÈ¡µÚÒ»¸öÔªËز¢¸´ÖÆ
7    var $last = $panels.eq($length - 1).clone().addClass("cloned").attr("id", 'panel_0');;//»ñÈ¡×îºóÒ»¸öÔªËز¢¸´ÖÆ
8    $parent.append($first);//½«liÐòÁÐÖеĵÚÒ»¸öÌí¼Óµ½ulÔªËØÖеÄ×îºóÒ»¸ö  $("#slide02").scrollLeft(0);
9    $parent.prepend($last);//½«liÐòÁÐÖеÄ×îºóÒ»¸öÌí¼Óµ½ulÔªËØÖеĵÚÒ»¸ö
10    var totalPanels = $(".scrollContainer").children().size();//ËùÓÐ×ÓÔªËصÄÊý×Ö£¬¹ö¶¯ÔªËصĸöÊý 7
11    var regWidth = $(".panel").css("width");//»ñÈ¡liÔªËصĿí¶È
12    var regImgWidth = $(".panel img").css("width");//»ñÈ¡ÆäÖÐͼƬµÄ¿í¶È
13    var movingDistance = 287;//ÿ´ÎÒƶ¯µÄ¾àÀë
14    var curWidth = 324;//µ±Ç°ÖмäliµÄ¿í¶ÈΪ350px
15    var curHeight = 602;//µ±Ç°ÖмäliµÄ¸ß¶Èδ312  
16    var curImgWidth = 324;
17    var curImgHeight = 577;
18    var othersW = 264;//ÆäËûliµÄ¿í¶È
19    var othersH = 524;//¸ß¶È
20    var othersImgW = 264;//ÆäËûliµÄ¿í¶È
21    var othersImgH = 502;//¸ß¶È
22    var $panels = $('#slider .scrollContainer > li');//´Ë´¦×÷ÓÃÊǽ«¸´ÖƽøÀ´²¹°×µÄÔªËØÖØи³Öµ
23    var $container = $('#slider .scrollContainer');
24    $panels.css({ 'float': 'left', 'position': 'relative' });
25    $("#slider").data("currentlyMoving", false);//ÊÇ·ñÕýÔÚÔ˶¯ÖÐ
26    $container.css('width', (($panels[0].offsetWidth + 25) * $panels.length) + 60).css('left', '0');//¼ÆËãÈÝÆ÷µÄ×ܵĿí¶È PS£º25ΪmarginÖµ offsetWidth
27    var scroll = $('#slider .scroll').css('overflow', 'hidden');
28    function returnToNormal(element) {//liÔªËØ·µ»Øµ½Õý³£×´Ì¬
29        $(element).animate({ width: othersW, height: othersH }).find("img").animate({ width: othersImgW, height: othersImgH });
30    };
31    function growBigger(element) {//µ±Ç°ÔªËØÖ®¼ä±ä´ó
32         $(element).addClass("current").animate({ width: curWidth, height: curHeight }).siblings().removeClass("current")
33		.end().find("img").animate({ width: curImgWidth, height: curImgHeight })
34    }
35    //direction true = right, false = left
36    function change(direction) {
37        //if not at the first or last panel
38        if ((direction && !(curPanel < totalPanels - 2)) || (!direction && (curPanel <= 1))) {
39            return false;
40        }
41        //if not currently moving
42        if (($("#slider").data("currentlyMoving") == false)) {
43            $("#slider").data("currentlyMoving", true);
44            var next = direction ? curPanel + 1 : curPanel - 1;
45            var leftValue = $(".scrollContainer").css("left");
46            var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
47            $(".scrollContainer").stop().animate({ "left": movement }, function () {
48                $("#slider").data("currentlyMoving", false);
49            });
50            returnToNormal("#panel_" + curPanel);
51            growBigger("#panel_" + next);
52            curPanel = next;
53            //remove all previous bound functions
54            $("#panel_" + (curPanel + 1)).unbind();
55            //go forward
56            $("#panel_" + (curPanel + 1)).click(function () { change(true); });
57            //remove all previous bound functions															
58            $("#panel_" + (curPanel - 1)).unbind();
59            //go back
60            $("#panel_" + (curPanel - 1)).click(function () { change(false); });
61            //remove all previous bound functions
62            $("#panel_" + curPanel).unbind();
63        }
64    }
65    // Set up "Current" panel and next and prev ÉèÖõ±Ç°ÔªËغÍÉÏÏÂ
66    growBigger("#panel_1");
67    var curPanel = 1;
68    $("#panel_" + (curPanel + 1)).click(function () { change(true); return false; });
69    $("#panel_" + (curPanel - 1)).click(function () { change(false); return false; });
70    //when the prev/next arrows are clicked
71    $("#slider .next").click(function () { change(true); });
72    $("#slider .prev").click(function () { change(false); });
73    $(window).keydown(function (event) {//¼üÅÌ·½Ïò¼ü¿ØÖÆ
74        switch (event.keyCode) {
75            case 13: //enter
76                $(".next").click();
77                break;
78            case 37: //prev arrow
79                $(".prev").click();
80                break;
81            case 39: //next arrow
82                $(".next").click();
83                break;
84        }
85    });

86
87});