支持ie8的轮播图

最新推荐文章于 2021-06-16 05:07:15 发布

fengye12zjs

最新推荐文章于 2021-06-16 05:07:15 发布

阅读量893

点赞数

分类专栏： javascript HTML5

javascript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML5

5 篇文章 0 订阅

订阅专栏

最近在做一个活动，其中产品给的需求是：一共是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效果图。但是太大了。上传失败。等下次做个小点的再穿上来吧。

fengye12zjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
支持ie8的轮播图

最近在做一个活动，其中产品给的需求是：一共是8张图片，开始显示2张，点击第3张，这时候页面显示3张。中间为大图，两边是小图。好了，直接贴代码了;//轮播JS /*未元素的首尾添加补白*/ var $panels = $('#slider .scrollContainer > li'); var $parent=$panels.parent();//或许当前li的最近一
复制链接

扫一扫