基础轮播
实现点击左右图片变化，可以自动换图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.banner{
position: relative;
}
img{
width: 100%;
}
.banner>div{
height:20px;
width: 30px;
background: rgb(255, 255, 255,0.5);
line-height: 20px;
text-align: center;
color:#333;
font-size:18px;
position:absolute;
top:50%;
margin-top: -10px;
}
.banner>div:nth-of-type(1){
border-radius:0 10px 10px 0;
left: 0;
}
.banner>div:nth-of-type(2){
border-radius:10px 0 0 10px;
right: 0;
}
</style>
</head>
<body>
<div class="banner">
<img src="./img/1.jpg" alt="">
<div class="button"><</div>
<div class="button">></div>
</div>
<script>
var images=["./img/1.jpg","./img/2.jpg","./img/3.jpg"],
btns=document.getElementsByClassName("button"),
img=document.getElementsByTagName("img")[0];
var div=document.getElementsByClassName("banner")[0];
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerText==">"){
var first=images.shift();
images.push(first);
img.src=images[0]
}else{
var last=images.pop();
images.unshift(last);
img.src=images[0];
}
}
}
timer=setInterval(function(){
var first=images.shift();
images.push(first);
img.src=images[0]
},1000);
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(function(){
var first=images.shift();
images.push(first);
img.src=images[0]
},1000);
}
</script>
</body>
</html>
淡入淡出轮播
实现图片左右点击更换，可以自动换图
未封装版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
width: 100%;
vertical-align: top;
opacity: 0;
}
.banner {
position: relative;
}
.banner>.banner_img>img {
position: absolute;
left: 0;
top: 0;
transition: all 1s linear;
}
.banner>button {
height: 30px;
width: 40px;
background: rgba(0, 0, 0, 0.3);
border: none;
font-size: 20px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -15px;
}
.banner>button:active {
background: rgba(0, 0, 0, 0.5);
}
.banner>button:nth-of-type(1) {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner>button:nth-of-type(2) {
right: 0;
border-radius: 15px 0 0 15px;
}
.banner>ul {
width: 60px;
text-align: center;
display: flex;
justify-content: space-around;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 15px;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #999;
cursor: pointer;
}
img.active {
opacity: 1;
}
.banner>ul>li.active {
background: #eee;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner_img">
<img src="./img/1.jpg" alt="" class="active">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<img src="./img/2.jpg" alt="">
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<script>
var btns=document.getElementsByTagName("button"),
lis=document.getElementsByTagName("li"),
imgs=document.getElementsByTagName("img"),
j=0,
div=document.getElementsByClassName("banner")[0];
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerText==">"){
j++;
j==lis.length&&(j=0);
for(i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
}else{
j--;
j==-1&&(j=lis.length-1);
for(i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
}
}
}
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
j=this.getAttribute("cli");
for(i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
}
}
timer=setInterval(function(){
j++;
j==lis.length&&(j=0);
for(i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
},2000)
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(function(){
j++;
j==lis.length&&(j=0);
for(i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
},2000)
}
</script>
</body>
</html>
封装版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
width: 100%;
vertical-align: top;
opacity: 0;
}
.banner {
position: relative;
}
.banner>.banner_img>img {
position: absolute;
left: 0;
top: 0;
transition: all 1s linear;
}
.banner>button {
height: 30px;
width: 40px;
background: rgba(0, 0, 0, 0.3);
border: none;
font-size: 20px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -15px;
}
.banner>button:active {
background: rgba(0, 0, 0, 0.5);
}
.banner>button:nth-of-type(1) {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner>button:nth-of-type(2) {
right: 0;
border-radius: 15px 0 0 15px;
}
.banner>ul {
width: 60px;
text-align: center;
display: flex;
justify-content: space-around;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 15px;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #999;
cursor: pointer;
}
img.active {
opacity: 1;
}
.banner>ul>li.active {
background: #eee;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner_img">
<img src="./img/1.jpg" alt="" class="active">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<img src="./img/2.jpg" alt="">
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<script>
var btns=document.getElementsByTagName("button"),
lis=document.getElementsByTagName("li"),
imgs=document.getElementsByTagName("img"),
j=0,
div=document.getElementsByClassName("banner")[0];
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerText==">"){
change(1);
}else{
change(-1);
}
}
}
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
change(0,this);
}
}
timer=setInterval(function(){
change(1);
},2000)
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(function(){
change(1);
},2000)
}
function change(num,li){
if(num){
j+=num;
if(j==lis.length){
j=0;
}else if(j==-1){
j=lis.length-1;
}
}else{
j=li.getAttribute("cli");
}
for(var i=0;i<lis.length;i++){
lis[i].className="";
imgs[i].className="";
}
lis[j].className="active";
imgs[j].className="active";
}
</script>
</body>
</html>
滚动轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
.banner {
position: relative;
overflow: hidden;
}
.banner_img{
width: 300%;
transition: all 1s linear;
}
.banner_img>img{
width: 33.3%;
float: left;
}
.banner>button {
height: 30px;
width: 40px;
background: rgba(0, 0, 0, 0.3);
border: none;
font-size: 20px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -15px;
}
.banner>button:active {
background: rgba(0, 0, 0, 0.5);
}
.banner>button:nth-of-type(1) {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner>button:nth-of-type(2) {
right: 0;
border-radius: 15px 0 0 15px;
}
.banner>ul {
width: 60px;
text-align: center;
display: flex;
justify-content: space-around;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 15px;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #999;
cursor: pointer;
}
.banner>ul>li.active {
background: #eee;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner_img">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<script>
var btns=document.getElementsByTagName("button"),
lis=document.getElementsByTagName("li"),
imgbox=document.getElementsByClassName("banner_img")[0],
j=0,
div=document.getElementsByClassName("banner")[0];
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
if(this.innerText==">"){
j++;
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
imgbox.style.marginLeft=j*(-100)+"%";
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
lis[j].className="active";
}else{
j--;
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
imgbox.style.marginLeft=j*(-100)+"%";
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
lis[j].className="active";
}
}
}
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
j=this.getAttribute("cli");
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
imgbox.style.marginLeft=j*(-100)+"%";
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
lis[j].className="active";
}
}
timer=setInterval(function(){
j++;
j==3&&(j=0);
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
imgbox.style.marginLeft=j*(-100)+"%";
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
lis[j].className="active";
},2000)
div.onmouseover=function(){
clearInterval(timer);
}
div.onmouseout=function(){
timer=setInterval(function(){
j++;
j==3&&(j=0);
btns[1].style.display=j==2?"none":"block";
btns[0].style.display=j==0?"none":"block";
imgbox.style.marginLeft=j*(-100)+"%";
for(var i=0;i<lis.length;i++){
lis[i].className="";
}
lis[j].className="active";
},2000)
}
</script>
</body>
</html>
封装对象版轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
.banner {
position: relative;
overflow: hidden;
}
.banner_img{
width: 300%;
transition: all 1s linear;
}
.banner_img>img{
width: 33.3%;
float: left;
}
.banner>button {
height: 30px;
width: 40px;
background: rgba(0, 0, 0, 0.3);
border: none;
font-size: 20px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -15px;
}
.banner>button:active {
background: rgba(0, 0, 0, 0.5);
}
.banner>button:nth-of-type(1) {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner>button:nth-of-type(2) {
right: 0;
border-radius: 15px 0 0 15px;
}
.banner>ul {
width: 60px;
text-align: center;
display: flex;
justify-content: space-around;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 15px;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #999;
cursor: pointer;
}
.banner>ul>li.active {
background: #eee;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner_img">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<script>
var carousal={
"btns":document.getElementsByTagName("button"),
"lis":document.getElementsByTagName("li"),
"banner":document.getElementsByClassName("banner")[0],
"imgbox":document.getElementsByClassName("banner_img")[0],
"j":0,
"timer":null,
"init":function(){
this.bind();
this.btnanimate();
this.dsq();
},
"bind":function(){
var me=this;
for(var i=0;i<this.btns.length;i++){
this.btns[i].onclick=function(){
if(this.innerText==">"){
me.animate(1);
}else{
me.animate(-1);
}
}
}
for(var i=0;i<this.lis.length;i++){
this.lis[i].onclick=function(){
me.animate(0,this)
}
}
this.banner.onmouseover=function(){
me.dsq();
}
this.banner.onmouseout=function(){
me.dsq();
}
},
"animate":function(num,li){
this.calcJ(num,li);
this.btnanimate();
this.clear();
this.imgbox.style.marginLeft=this.j*(-100)+"%";
this.lis[this.j].className="active";
},
"btnanimate":function(){
this.btns[0].style.display=this.j==0?"none":"block";
this.btns[1].style.display=this.j==2?"none":"block";
},
"clear":function(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className="";
}
},
"calcJ":function(num,li){
if(num){
this.j+=num;
this.j==this.lis.length&&(this.j=0);
this.j==-1&&(j=this.lis.length-1);
}else{
this.j=parseInt(li.getAttribute("cli"));
}
},
"dsq":function(){
var me=this;
if(this.timer==null){
this.timer=setInterval(function(){
me.animate(1);
},3000)
}else{
clearInterval(this.timer);
this.timer=null;
}
}
}
carousal.init();
</script>
</body>
</html>
面向对象轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align: top;
}
.banner {
position: relative;
overflow: hidden;
height: fit-content;
}
.banner_img{
width: 300%;
transition: all 1s linear;
}
.banner_img>img{
width: 33.3%;
float: left;
}
.banner>button {
height: 30px;
width: 40px;
background: rgba(0, 0, 0, 0.3);
border: none;
font-size: 20px;
text-align: center;
line-height: 30px;
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -15px;
}
.banner>button:active {
background: rgba(0, 0, 0, 0.5);
}
.banner>button:nth-of-type(1) {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner>button:nth-of-type(2) {
right: 0;
border-radius: 15px 0 0 15px;
}
.banner>ul {
width: 60px;
text-align: center;
display: flex;
justify-content: space-around;
position: absolute;
left: 50%;
margin-left: -30px;
bottom: 15px;
}
.banner>ul>li {
width: 10px;
height: 10px;
border-radius: 50%;
background: #999;
cursor: pointer;
}
.banner>ul>li.active {
background: #eee;
}
</style>
</head>
<body>
<div class="banner" id="cal">
<div class="banner_img">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<div class="banner" id="cal2">
<div class="banner_img">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
<button><</button>
<button>></button>
<ul>
<li cli="0" class="active"></li>
<li cli="1"></li>
<li cli="2"></li>
</ul>
</div>
<script>
function cal(parent){
this.parent=parent;
this.imgbox=parent.getElementsByClassName("banner_img")[0];
this.btns=parent.getElementsByTagName("button");
this.lis=parent.getElementsByTagName("li");
this.j=0;
this.timer=null;
}
cal.prototype.init=function(){
this.bind();
this.dsq();
}
cal.prototype.bind=function(){
var me=this;
for(var i=0;i<this.btns.length;i++){
this.btns[i].onclick=function(){
if(this.innerText==">"){
me.animate(1);
}else{
me.animate(-1);
}
}
}
for(var i=0;i<this.lis.length;i++){
this.lis[i].onclick=function(){
me.animate(0,this);
}
}
this.parent.onmouseover=function(){
me.dsq();
}
this.parent.onmouseout=function(){
me.dsq();
}
}
cal.prototype.animate=function(num,li){
this.clear()
this.calcJ(num,li);
this.imgbox.style.marginLeft=this.j*(-100)+"%";
this.lis[this.j].className="active";
}
cal.prototype.calcJ=function(num,li){
if(num){
this.j+=num;
this.j==this.lis.length&&(this.j=0);
this.j==-1&&(this.j=this.lis.length-1);
}else{
this.j=parseInt(li.getAttribute("cli"));
}
}
cal.prototype.clear=function(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className="";
}
}
cal.prototype.dsq=function(){
var me=this;
if(this.timer==null){
this.timer=setInterval(function(){
me.animate(1)
},2000)
}else{
clearInterval(this.timer);
this.timer=null;
}
}
var banner=document.getElementsByClassName("banner");
var cal1=new cal(banner[0]);
cal1.init();
var cal2=new cal(banner[1]);
cal2.init();
</script>
</body>
</html>
