<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin:0; padding:0; list-style: none; } #one,#rua2{ top:95%; left:50%; transform: translateX(-50%); position:absolute; height: 15px; width: 120px; margin:0 auto; justify-content: space-around; display:flex; } #rua1,#two{ position: relative; height: 300px; width: 300px; margin:0 auto; } #rua1 div,#two div{ display:none; height: 300px; width: 300px; color:white; text-align:center; font:50px/300px ""; } .xian{ display:block !important; } .xian1{ background-color:gray !important; } #one>li,#rua2>li{ height: 15px; width: 15px; background-color:green; border-radius:50%; } #left,#rua3{ background:deeppink; position: absolute; height: 50px; width: 50px; top:50%; left:2%; outline: none; border:none; transform: translateY(-50%); } #right,#rua4{ background:deeppink; position: absolute; height: 50px; width: 50px; top:50%; right:2%; outline: none; border:none; transform: translateY(-50%); } </style> </head> <body> <!--<ul id="one">--> <!--<li></li>--> <!--<li></li>--> <!--<li></li>--> <!--</ul>--> <section id="two"> <div class="xian go" style="background-color:orange;">1</div> <div class="go" style="background-color:purple;">2</div> <div class="go" style="background-color:pink;">3</div> <div class="go" style="background-color:black;">4</div> <div class="go" style="background-color:brown;">5</div> <div class="go" style="background-color:blue;">6</div> <ul id="one"> <li class="xian1 gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> </ul> <input type="button" id="left" value="<"> <input type="button" id="right" value=">"> </section> <section id="rua1"> <div class="xian go" style="background-color:orange;">1</div> <div class="go" style="background-color:purple;">2</div> <div class="go" style="background-color:pink;">3</div> <div class="go" style="background-color:black;">4</div> <div class="go" style="background-color:brown;">5</div> <div class="go" style="background-color:blue;">6</div> <ul id="rua2"> <li class="xian1 gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> <li class="gogo"></li> </ul> <input type="button" id="rua3" value="<"> <input type="button" id="rua4" value=">"> </section> <script> class lubo{ constructor(id1,id2,id3,id4) { this.two = document.getElementById(id1);//获取id,前面必须要用document this.one = document.getElementById(id2); this.left = document.getElementById(id3); this.right = document.getElementById(id4); this.li = this.one.getElementsByClassName("gogo"); this.twoDiv=this.two.getElementsByClassName("go"); this.num =0; this.render(); } // setInterval(()=>{ // for(let i=0;i<this.twoDiv.length;i++){ // for(let j=0;j<this.twoDiv.length;j++){ // this.twoDiv[j].classList.remove("xian");//上面用了className.下面就用classlist; // } // this.twoDiv[this.num].classList.add("xian"); // } // },1000)//.bind(this)//加在function后面 render(){ var kk=function(){ this.num+=1; if(this.num>=this.li.length){ this.num=0; } for(let j=0;j<this.li.length;j++){ this.li[j].classList.remove("xian1"); this.twoDiv[j].classList.remove("xian"); } this.li[this.num].classList.add("xian1"); this.twoDiv[this.num].classList.add("xian"); }.bind(this); this.right.onclick=kk; var kkk=setInterval(kk,2000); this.two.onmouseover=function () { clearInterval(kkk); }; this.one.onmouseout=function () { kkk=setInterval(kk,2000); }; this.left.onclick=()=>{ this.num-=1; if(this.num<0){ this.num=this.li.length-1; } for(let j=0;j<this.li.length;j++){ this.li[j].classList.remove("xian1"); this.twoDiv[j].classList.remove("xian"); } this.li[this.num].classList.add("xian1"); this.twoDiv[this.num].classList.add("xian"); } } } new lubo("rua1","rua2","rua3","rua4")//一定要加""; new lubo("two","one","left","right")//一定要加""; // 4:轮播方法封装; // var one=document.getElementById("one"); // var oneLi=one.getElementsByTagName("li"); // var two=document.getElementById("two"); // var twoDiv=two.getElementsByTagName("div"); // // // // for(let i=0;i<oneLi.length;i++){ // oneLi[i].onclick=function () { // for(j=0;j<oneLi.length;j++){ // twoDiv[j].className=""; // } // twoDiv[i].className="xian"; // } // } // // class lubo{ // constructor(id,id2){ // this.one=document.getElementById(id); // this.oneLi=this.one.getElementsByTagName("li"); // // this.two=document.getElementById(id2); // this.twoDiv=this.two.getElementsByTagName("div"); // this.render(); // } // // render(){ // for(let i=0;i<this.oneLi.length;i++){ // this.oneLi[i].onclick=()=>{//1:箭头函数2:that 绑定3:bind(this); // for(var j=0;j<this.oneLi.length;j++){//必须加var或let // this.twoDiv[j].className=""; // } // this.twoDiv[i].className="xian"; // } // } // } // // } // // new lubo("one","two") // 1:function per(name,age) { // this.name = name; // this.age = age; //构造函数 // } // // jineng (){ // // this.age=18; // // } // // // per.prototype.jineng=function () { // console.log(我会划水); // } // // var oper1=new per("liming","19"); // var oper2=new per("bishi","10"); // console.log(oper1.name); // console.log(oper1.jineng == oper2.jineng); // var obh=new Object() // console.log(obh); // 2: class Pre{ // constructor(name,age){ // this.name=name; // this.age=age // // } // // jineng(){ // // this.age=18; // // } // } // // // // // // var pre1=new pre("liming","19"); // // var pre2=new pre("avbs","128"); // // class Son extends Pre{//多肽 // // super(name,age,height){ // // // // } // constructor(name,age,shuai){ // // 1./ super().shuai=shuai;价格父元素; // super(name.age) // this.shuai=shuai; // } // } // // var pre1=new Son("liming","19","好帅"); // console.log(pre1.shuai); //3:工厂模式 // function person(name,age,skill) { // var o=new Object(); // o.name=name; // o.age=age; // o.skill=skill; // // o.sayName=function () { // alert(this.name) // } // // return o; // } // // var person1=person("liming","18","swim"); // var person2=person("ac","18","run"); // console.log(person1.name); // // console.log(person1.sayName() == person2.sayName()); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .one{ position: relative;; height: 300px; width: 300px; overflow:hidden; margin:0 auto; } #two{ height: 300px; width: 1800px; left:-300px; display:flex; position:absolute; } #two div{ /*display:none;*/ height: 300px; width: 300px; color:white; text-align:center; font:50px/300px ""; } .xian{ display:block !important; } .xian1{ background-color:gray !important; } /*#one>li,#rua2>li{*/ /*height: 15px;*/ /*width: 15px;*/ /*background-color:green;*/ /*border-radius:50%;*/ /*}*/ #left{ background:deeppink; position: absolute; height: 50px; width: 50px; top:50%; left:2%; outline: none; border:none; transform: translateY(-50%); } #right{ background:deeppink; position: absolute; height: 50px; width: 50px; top:50%; right:2%; outline: none; border:none; transform: translateY(-50%); } </style> </head> <body> <div class="one"> <section id="two"> <div class="xian go" style="background-color:orange;">1</div> <div class="go" style="background-color:purple;">2</div> <div class="go" style="background-color:pink;">3</div> <div class="go" style="background-color:black;">4</div> <div class="go" style="background-color:brown;">5</div> <div class="go" style="background-color:blue;">6</div> </section> </div> <input type="button" id="left" value="<"> <input type="button" id="right" value=">"> <script> //1:垂直轮播 left.onclick=function () { // two.style.transform="translateY(300px)"; // two.style.transition="1s"; // left.disabled=true; // right.disabled=true; // setTimeout(function () { // var car1=two.removeChild(twoDiv[twoDiv.length-1]); // two.insertBefore(car1,twoDiv[0]); // two.style.transform="translateY(0px)"; // two.style.transition=""; // left.disabled=false; // right.disabled=false; // },1000) // } // // right.onclick=function () { // two.style.transform="translateY(-300px)"; // two.style.transition="1s"; // left.disabled=true; // right.disabled=true; // setTimeout(function () { // var car2=two.removeChild(twoDiv[0]); // two.appendChild(car2); // two.style.transform="translateY(0px)"; // two.style.transition=""; // left.disabled=false; // right.disabled=false; // },1000) // // } // 1:水平轮播 class lunbo{ constructor(id1,id2,id3){ this.two=document.getElementById(id1); this.twoDiv=this.two.getElementsByClassName("go"); this.left=document.getElementById(id2); this.right=document.getElementById(id3); this.render(); } render(){ this.left.onclick=function () { this.two.style.transform="translateX(300px)"; this.two.style.transition="1s"; this.left.disabled=true; this.right.disabled=true; setTimeout(()=>{ var car1=this.two.removeChild(this.twoDiv[this.twoDiv.length-1]); this.two.insertBefore(car1,this.twoDiv[0]); this.two.style.transform="translateX(0px)"; this.two.style.transition=""; this.left.disabled=false; this.right.disabled=false; },1000) }.bind(this); this.right.onclick=()=> { this.two.style.transform="translateX(-300px)"; this.two.style.transition="1s"; this.left.disabled=true; this.right.disabled=true; setTimeout(()=>{ var car2=this.two.removeChild(this.twoDiv[0]); this.two.appendChild(car2); this.two.style.transform="translateX(0px)"; this.two.style.transition=""; this.left.disabled=false; this.right.disabled=false; },1000) } } } new lunbo("two","left","right") </script> </body> </html>