支持ie8的轮播图
来源:互联网 发布:网络客服提成方案 编辑:程序博客网 时间:2024/06/05 21:14
最近在做一个活动,其中产品给的需求是:一共是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效果图。但是太大了。上传失败。等下次做个小点的再穿上来吧。
0 0
- 支持ie8的轮播图
- 支持ie8的jquery
- IE8只支持3层次的@import
- IE8的getElementById不再支持name属性
- IE8支持html5的<video>标签
- 完美支持IE8/IE9的鼠标手势
- css 里面 ie8 支持css3的rgba()
- IE8支持video标签的方法
- layui+jquery支持IE8的表格分页
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- TD添加IE8支持
- IE8版本支持canvas
- IE8支持background-size
- IE8支持css3选择器
- loadrunner11完美支持IE8
- ie8支持foreach
- 增加RSH(Really Simple History)框架对IE8的支持
- [javascript,js]Firefox,Netscape,IE8支持的log功能
- ABAP 开发系列(08): SAP Open SQL
- PHP 分页框架的使用
- Mysql中文乱码
- jquery获取当前月有多少天
- 第一篇博客
- 支持ie8的轮播图
- C# Form1中打开Form2并永远将焦点放在Form2
- 【Mybatis】环境搭建和简单实例
- 建立maven项目时没有出现maven的标准结构
- JDBC(八)批量处理
- oracle密码过期
- showModalDialog模态框实现点击模态框内容之后,在不关闭模态框的情况下,内容加载到父窗体中
- spark生态圈整体技术架构图
- Linux 时间表示