3 <머리> 4 5
오늘 저는 객체 지향 프로그래밍을 검토했습니다.
이 그림을 보면 아무것도 아니라고 생각할 것입니다. 그러면 코드로 이동하세요:
HTML 부분:
1 76c82f278ac045591c9159d381de2c57 2 9fd01892b579bba0c343404bcccd70fb 3 93f0f5c25f18dab9d176bd4f6de5d30e 4 a80eb7cbb6fff8b0ff70bae37074b813 5 b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f 6 c9ccee2e6ea535a969eb3f532ad9fe89 7 ul,ol,li{padding:0;margin:0;list-style: none;} 8 .container1{ 9 width: 600px;10 height: 400px;11 margin:50px auto;12 position: relative;13 }14 15 .container2{16 width: 500px;17 height: 300px;18 margin:50px auto;19 position: relative;20 }21 22 531ac245ce3e4fe3d50054a55f26592723 4ffe30e92b3d493fe25ee499784b21fc24 97a707776a5a938745e4303c96933e522cacc6d41bbb37262a98f745aa00fbf025 c81c0a6058b056a1472909437d15aedd2cacc6d41bbb37262a98f745aa00fbf026 9c3bca370b5104690d9ef395f2c5f8d127 6c04bd5ca3fcae76e30b72ad730ca86d28 591fc195617b59515f0c9ea2737f619529 ff6d136ddc5fdfeffaf53ff6ee95f18530 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb31 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c7adf606ce41d1f83af5b1a6b9fda5dad5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb32 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb33 34 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cd3fa72dc67df9c5cb3a47b15775cf67c5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb35 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb36 37 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c96780035a1a6118bf90049ebbc7dadfb5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb38 929d1f5ca49e04fdcb27f9465b94468939 16b28748ea4df4d9c2150843fecfba6840 41 42 ab9c64ca2f28aaf88495ab5b19af54e943 ff6d136ddc5fdfeffaf53ff6ee95f18544 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5ccb20f7d11a591073c9f8ad3529fa069b5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb45 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c687453a96f84e202ba2a2b2f8113901e5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb46 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cdcb25fce629e281a8f0bca5b0aa26d995db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb47 48 929d1f5ca49e04fdcb27f9465b94468949 16b28748ea4df4d9c2150843fecfba6850 51 52 3f1c4e4b6b16bbbd69b2ee476dc4f83a53 54 var s1 = new Slider("slide1",{startIndex:0,speed:50});55 var s2 = new Slider("slide2",{startIndex:2});56 console.info(s1);57 console.info(s2);58 59 2cacc6d41bbb37262a98f745aa00fbf060 36cc49f0c466276486e50c850b7e495661 73a6ac4ed44ffec12cee46588e518a5e
필요한 CSS 코드
.slider ul li a{display: block;width: 100%;height: 100%;} .slider ul,.slider ul li,.slider ul img{width: 100%;height: 100%;} .slider ol{position: absolute;bottom:10px;background: rgba(255,255,255,.5);height: 20px;border-radius: 5px;right:20px;z-index:999;} .slider ol li{margin:0 5px;width:10px;height:10px;border-radius:5px;display: inline-block;line-height:10px;background: red;font-size:0;vertical-align: middle;position:relative;top:-3px;} .slider .mask{ position: absolute; bottom:10px; width: 100%; height: 50px; line-height: 50px; text-align: center; background: rgba(0,0,0,.5); color:#fff; } .slider span{ width:50px; height:50px; border-radius : 25px; position : absolute; top : 50%; transform: translateY(-50%); transition: background-color .5s; background-color: rgba(255,255,255,0); } .slider span.btnright{ right:10px; } .slider span.btnleft{ left:10px; } .slider span:hover{ background-color: rgba(255,255,255,1); } .slider span.btnleft:after,span.btnright:after{ transition: transform .5s; position: absolute; top:24px; left:15px; transform-origin: left top; transform: rotate(30deg); content: "";display: block;width: 20px;height: 2px;background-color: red; } .slider span.btnright:after{ left:auto; right:15px; transform-origin: right top; } .slider .btnleft:before,.btnright:before{ transition: transform .5s; position: absolute; top:24px; left:15px; transform-origin: left top; transform: rotate(-30deg); content: "";display: block;width: 20px;height: 2px;background-color: red; } .slider .btnright:before{ transform-origin: right top; left: auto; right:15px; transform: rotate(-30deg); } .slider .btnleft:hover:after{ transform: rotate(45deg); } .slider .btnleft:hover:before{ transform: rotate(-45deg); } .slider .mask{ position:absolute; bottom:0; height:50px; line-height:50px; color:#fff; text-align: left; text-indent: 2em; background-color:rgba(0,0,0,.5); }
JS 부분:
function $(id){ return document.getElementById(id); } /** * 2.0 * 在指定的容器中去找某一个TagName的html标签集合 * containerId 可以是一个字符串,也可以是一个 dom对象。 * @param {[type]} containerId [description] * @param {[type]} tagName [description] * @return {[type]} [description] * */ function $get(containerId,tagName){ if(typeof containerId =="string" && $(containerId)){ return $(containerId).getElementsByTagName(tagName); } else if(typeof containerId=="object") { return containerId.getElementsByTagName(tagName); } else{ throw ("你写的第一个参数不是一个ID"); } } //<span id="span" className="leftBtn" stlye="width:100px;height:100px;">按钮</span> function $create(tagName,attr,style){ var dom = document.createElement(tagName); for(var pName in attr){ dom[pName] = attr[pName]; } for(var pName in style){ dom.style[pName] = style[pName]; } return dom; } function info(obj){ console.info(obj); } function getH(obj){ //debugger; if(obj.currentStyle){ getH = function(obj){ return parseInt ( obj.currentStyle.height ); } }else{ getH=function(obj){ return parseInt ( window.getComputedStyle(obj, null).height ); } } getH(obj) ; } //对对象进行拓展 function extend(defaultConf,userConf){ //对于在defaultConf这个对象中的每一个属性, //如果这个属性名在userConf中的也存在,则使用userConf中的那个属性值 for(var pName in defaultConf){ if(userConf.hasOwnProperty(pName)){ defaultConf[pName] = userConf[pName]; } } }
Carousel js
1 ;(function(window){ 2 3 //有问题,请自行改正!!!! 参考slider.js 4 var defaultConf = { 5 "isAuto":true, 6 "speed":"normal", 7 "startIndex":0, 8 "isClickable":true 9 }; 10 11 var speedList={ 12 "faster":2000, 13 "slower":4000, 14 "normal":3000 15 }; 16 17 function Slider(containerId,conf){ 18 19 // if(conf) 20 // extend(defaultConf,conf); //这一句后,defaultConf这个对象中就会包含用户的设置 21 22 conf && extend(defaultConf,conf); 23 24 this.container = $(containerId); 25 this.slideList = $get($get(this.container,"ul")[0],"li");// 26 //this.indexList = $get($get(this.container,"ol")[0],"li");//数字指示条 27 this.num = this.slideList.length; 28 this.indexList = createIndexList.call(this);//数字指示条 29 30 this.leftBtn = createLinkBtn.call(this,"left"); //创建按钮 31 this.rightBtn = createLinkBtn.call(this,"right"); //创建按钮 32 33 this.txtDiv = createTxtDiv.call(this);//创建文字说明的区域 34 35 this.currentIndex = defaultConf.startIndex; //当前整个轮播图中显示的 第几 张 36 37 init.call(this,this.currentIndex); //初始化 把其它的li都隐藏,把第一个显示出来 38 39 this.timer ; 40 41 if(typeof defaultConf.speed =="string") 42 this.speed = speedList[defaultConf.speed] || 2000; 43 else if (typeof defaultConf.speed =="number") { 44 this.speed = defaultConf.speed; 45 } 46 if( defaultConf.isAuto ) 47 this.auto(); 48 49 bindEvent.call(this); //绑定事件 50 } 51 52 var createTxtDiv = function (){ 53 54 console.info(this); 55 56 //1.创建div,设置基本属性及样式 57 var div = $create("div",{className:"mask"},{}) 58 div.innerHTML = ""; 59 //2.添加到容器中 60 this.container.appendChild(div); 61 //3.返回 62 return div; 63 } 64 65 Slider.prototype.auto = function(){ 66 var that = this; 67 this.timer = setInterval(function(){ 68 that.rightBtn.onclick(); 69 //that.rightBtn.click(); 70 71 },that.speed); 72 73 console.info("定时器"+this.timer+"开动"); 74 } 75 var createLinkBtn = function(dir){ 76 //1.创建一个dom元素 设置基本的属性,同时设置样式。 77 var span = $create("span",{className:"btn"+dir},{ 78 79 }); 80 81 //3.把它添加到容器中 82 this.container.appendChild(span); 83 //4.返回 84 85 return span; 86 } 87 var createIndexList = function(){ //创建ol li结构 88 //ol>li 89 var ol = $create("ol"); //创建ol 90 91 var lis=[]; //保存所有的ol中的li 92 for (var i = 0; i < this.num; i++) { 93 var li = $create("li"); 94 ol.appendChild(li); 95 lis.push(li); //加到数组中 96 } 97 this.container.appendChild(ol); 98 return lis; 99 }100 101 Slider.prototype.moveto = function(indexabc){102 for(var i = 0; i< this.num; i++){103 this.slideList[i].style.display = "none";104 this.indexList[i].style.backgroundColor="red";105 }106 this.slideList[indexabc].style.display = "block";107 this.indexList[indexabc].style.backgroundColor="blue";108 109 //更新当前的索引110 this.currentIndex = indexabc;111 112 //更新文字说明113 var txt = $get(this.slideList[indexabc],"img")[0].alt ;114 this.txtDiv.innerHTML = txt;115 // console.info("当前是:"+this.currentIndex);116 }117 var bindEvent = function(){118 var that = this; /*var 能不能省*/119 //绑定指示条的事件120 121 if( defaultConf.isClickable){122 for (var i = 0; i < this.num; i++) {123 this.indexList[i].index = i;124 this.indexList[i].onmouseenter = function(){125 that.moveto(this.index);126 }127 } 128 }129 130 this.rightBtn.onclick = function(){131 //向右,显示下一张 当前的索引值要+1132 var i = that.currentIndex + 1;133 // i = (i== that.num) ? 0 : i; 134 i = i % that.num;135 that.moveto(i);136 }137 138 //绑定按钮的事件139 this.leftBtn.onclick = function(){140 //btnLeft 向左,显示上一张141 var i = that.currentIndex - 1; //上一张的编号142 //如果它等于-1,应该要显示最后一张,最后一张的索引值是that.num-1。143 //i = (i==-1) ? that.num-1 : i;144 i = (i+that.num) % that.num;145 //i = i < 0 ? that.num+i : i;146 that.moveto(i);147 }148 if(defaultConf.isAuto) {149 this.container.onmouseenter = function(){150 // console.info("stop");151 clearInterval(that.timer);152 153 }154 this.container.onmouseleave = function(){155 // console.info("go on");156 157 that.auto();158 }159 }160 }161 var init = function(yourlikeIndex){162 if( yourlikeIndex)163 this.moveto(yourlikeIndex);164 else165 this.moveto(0);166 }167 168 window.Slider = Slider;169 170 })(window);
모든 사람에게 도움이 되기를 바랍니다. 이는 jQuery를 기반으로 한 것이 아니며 제가 직접 간단한 방법을 캡슐화했습니다.
앞으로 우리의 이미지 캐러셀은
1 591fc195617b59515f0c9ea2737f6195 2 ff6d136ddc5fdfeffaf53ff6ee95f185 3 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 4 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c7adf606ce41d1f83af5b1a6b9fda5dad5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 5 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 6 7 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cd3fa72dc67df9c5cb3a47b15775cf67c5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 8 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 9 10 25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c96780035a1a6118bf90049ebbc7dadfb5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb11 929d1f5ca49e04fdcb27f9465b94468912 16b28748ea4df4d9c2150843fecfba6813 3f1c4e4b6b16bbbd69b2ee476dc4f83a14 15 var s1 = new Slider("slide1",{startIndex:0,speed:50});16 17 18 2cacc6d41bbb37262a98f745aa00fbf0
을 사용할 수 있으며, 이는 더 많은 캐러셀 구성요소가 있는 웹사이트에서 사용할 수 있습니다. 물론, 우리 방법의 js를 압축하면 더 강력하게 만들 수 있습니다. end , 변수 이름은 간단합니다. 그러면 효과가 더 좋아질 것입니다.
위 내용은 이미지 캐러셀 구현 방법에 대한 자세한 설명은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!