支持ie8的轮播图

最近在做一个活动,其中产品给的需求是:一共是8张图片,开始显示2张,点击第3张,这时候页面显示3张。中间为大图,两边是小图。好了,直接贴代码了;

//轮播JS
  /*未元素的首尾添加补白*/
    var $panels				= $('#slider .scrollContainer > li');
    var $parent=$panels.parent();//或许当前li的最近一级的父元素
    var $length=$panels.length;//获取指定length值
    var $first=$panels.eq(0).clone().addClass("panel cloned").attr("id",'panel_'+($length+1));//获取第一个元素并复制
    var $last=$panels.eq($length-1).clone().addClass("cloned").attr("id",'panel_0');;//获取最后一个元素并复制
    $parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个  $("#slide02").scrollLeft(0);
    $parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个
    var totalPanels         = $(".scrollContainer").children().size();//所有子元素的数字,滚动元素的个数 7
    var regWidth            = $(".panel").css("width");//获取li元素的宽度
    var regImgWidth         = $(".panel img").css("width");//获取其中图片的宽度
    var movingDistance      = 195;//每次移动的距离
    var curWidth            = 384;//当前中间li的宽度为350px
    var curHeight         =753;//当前中间li的高度未312  
    var curImgWidth  =323;
    var curImgHeight  =574;
    var curBottom          =0;
    var othreMargin         =150;
    var othersW           =170;//其他li的宽度
    var othersH           =235;//高度
    /*var othersImgW           =100%;//其他li的宽度
    var othersImgH           =100%;//高度
*/  var $panels				= $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值
    var $container			= $('#slider .scrollContainer');
    $(".addClass").css({'margin-top':150});
    $panels.css({'float' : 'left','position' : 'relative'});
    $("#slider").data("currentlyMoving", false);//是否正在运动中
    $container.css('width', (($panels[0].offsetWidth+26) * $panels.length) + 60 ).css('left','0');//计算容器的总的宽度 PS:25为margin值 offsetWidth
    var scroll = $('#slider .scroll').css('overflow', 'hidden');
    function returnToNormal(element) {//li元素返回到正常状态
        $(element).animate({ width: othersW,height: othersH,marginTop:othreMargin});
        $(element).find("div.contentMain").hide();

    };
    function growBigger(element) {//当前元素之间变大
        $(element).addClass("current").animate({ width: curWidth,height:curHeight,marginTop:curBottom}).siblings().removeClass("current")
        .end();
        $(element).find("div.contentMain").show();

    }
    //direction true = right, false = left
    function change(direction) {
        //if not at the first or last panel
        if((direction && !(curPanel < totalPanels-3)) || (!direction && (curPanel <= 1))) {
            return false;
        }   
        if (direction &&curPanel>0) {
            $("#slider .prev").show();
            $("#slider .prev").text(curPanel);
            $("#slider .next").text(curPanel+2);
            if(curPanel+2==9){
                $("#slider .next").hide();
            }
        } if (!direction) {
            if (curPanel>2) {
                $("#slider .next").show();
                $("#slider .prev").text(curPanel-2);
                $("#slider .next").text(curPanel);

            } else {

                $("#slider .prev").text("");
                $("#slider .prev").css("display","none");
                $("#slider .next").text(curPanel);
            }
        }
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            $("#slider").data("currentlyMoving", true);
            var next         = direction ? curPanel + 1 : curPanel - 1;
            var leftValue    = $(".scrollContainer").css("left");
            var movement     = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
            $(".scrollContainer").stop().animate({"left": movement}, function() {
                $("#slider").data("currentlyMoving", false);
            });
            returnToNormal("#panel_"+curPanel);
            growBigger("#panel_"+next);
            curPanel = next;
            //remove all previous bound functions
            $("#panel_"+(curPanel+1)).unbind();    
            //go forward
            $("#panel_"+(curPanel+1)).click(function(){ change(true); });
            //remove all previous bound functions                                                           
            $("#panel_"+(curPanel-1)).unbind();
            //go back
            $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
            //remove all previous bound functions
            $("#panel_"+curPanel).unbind();
        }
    }
    // Set up "Current" panel and next and prev 设置当前元素和上下
    growBigger("#panel_1"); 
    var curPanel = 1;
    $("#panel_"+(curPanel+1)).click(function(){ change(true);return false;});
    $("#panel_"+(curPanel-1)).click(function(){ change(false);return false;});
    //when the prev/next arrows are clicked
    // $("#slider .next").click(function(){ change(true);});   
    // $("#slider .prev").click(function(){ change(false);});
    $(window).keydown(function(event){//键盘方向键控制
        switch (event.keyCode) {
            case 13: //enter
                $(".next").click();
            break;
            case 37: //prev arrow
                $(".prev").click();
            break;
            case 39: //next arrow
                $(".next").click();
            break;
        }
    }); 

  //轮播JS结束

  • 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
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 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
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116

html:

<!-- 轮播开始 -->
            <div class="btnMode" id="slider">    
                <a href="javascript:void(0);" class="prev btn"></a>
                    <div class="scroll">    
                        <ul class="scrollContainer">
                            <li class="panel addClass" id="panel_1">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b01.jpg" class="cur_img"/>
                                    <!-- <span>第一张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content1">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_2">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b02.jpg" class="cur_img "/>
                                    <!-- <span>第二张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content2">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_3">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b03.jpg" class="cur_img"/>
                                    <!-- <span>第三张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content3">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel current addClass" id="panel_4">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b04.jpg" class="cur_img"/>
                                    <!-- <span>第四张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content4">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_5">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b05.jpg" class="cur_img"/>
                                    <!-- <span>第五张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content5">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_6">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b06.jpg" class="cur_img"/>
                                    <!-- <span>第六张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content6">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel addClass" id="panel_7">
                                <a href="javascript:;" class="inside" >
                                    <img  alt="" src="b07.jpg" class="cur_img"/>
                                    <!-- <span>第七张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content7">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                            <li class="panel  addClass" id="panel_8">
                                <a href="javascript:;" class="inside" >

                                    <img  alt="" src="b08.jpg" class="cur_img"/>
                                    <!-- <span>第八张</span> -->
                                </a>
                                <div class="contentMain">
                                <div class="content8">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>
                            </li>
                             <li class="panel addClass" id="panel_9">
                                <a href="javascript:;" class="inside" >
                                    <img  src="z.jpg" class="cur_img"/>
                                    <!-- <span>第十张</span> -->
                                </a>
                                    <div class="contentMain">
                                <div class="content1">
                                    <img src="y1.png" class="y1">
                                    <img src="y2.png" class="y2">
                                    <span><img src="hand.png"></span>
                                </div>
                                </div>

                            </li>

                        </ul>
                    </div>
            <a href="javascript:void(0);" class="next btn">2</a>     
</div>
            <!-- 轮播结束 -->
  • 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
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 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
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130

本来为了说的明白做了个Git效果图。但是太大了。上传失败。等下次做个小点的再穿上来吧。

展开阅读全文

没有更多推荐了,返回首页