<!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>