輪播圖透明度版
阿新 • • 發佈：2021-07-09
<!DOCTYPEhtml>
<htmllang="en">
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; list-style:none; }
div{ width:700px; height:500px; margin:100pxauto; position:relative; /*background:pink;*/ }
.points{ position:absolute; width:100%; display:flex; justify-content:center; bottom:10px; z-index:1; }
.pointsli{ width:20px; height:20px; background:#fff; border-radius:50%; margin:10px; }
.bannerimgs{ width:700px; height:500px; }
.bannerimgsli{ width:700px; height:500px; opacity:0; position:absolute; top:0; left:0; }
.bannerimgsliimg{ width:100%; height:100%; }
.active{ background-color:red!important; }
.show{ opacity:1!important; transition:0.5s; }
span{ width:30px; height:30px; text-align:center; line-height:30px; border-radius:50%; background:rgba(0,0,0,.5); position:absolute; top:0; bottom:0; margin:auto; }
.next{ right:0; } </style> </head>
<body> <div> <ulclass="points"> <liclass="active"></li> <li></li> <li></li> <li></li> </ul> <ulclass="bannerimgs"> <liclass="show"><imgsrc="../img/index_04.jpg"alt=""></li> <li><imgsrc="../img/2.jpg"alt=""> </li> <li><imgsrc="../img/index_06.jpg"alt=""> </li> <li><imgsrc="../img/index_08.jpg"alt=""></li> </ul> <spanclass="prev"><</span> <spanclass="next">></span> </div> <script> varoPoints=document.querySelectorAll('.pointsli') varoBannerImgs=document.querySelectorAll('.bannerimgsli') varprev=document.querySelector('.prev') varnext=document.querySelector('.next') vart=null; varindex=0; //繫結點選事件 for(vari=0;i<oPoints.length;i++){ oPoints[i].index=i oPoints[i].onclick=function(){ clearInterval(t) for(varj=0;j<oPoints.length;j++){ oPoints[j].classList.remove('active') oBannerImgs[j].classList.remove('show') } this.classList.add('active') varx=this.index oBannerImgs[x].classList.add('show') } } //自動播放 clearInterval(t) t=setInterval(function(){ index++; if(index>=oPoints.length){ index=0 } for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') },2000) //上翻頁 prev.onclick=function(){ clearInterval(t) index-- if(index<=-1){ index=oPoints.length-1 }
for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') } //下翻頁 next.onclick=function(){ clearInterval(t) index++ if(index>=oBannerImgs.length){ index=0 } for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') } </script> </body>
</html>
<head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; list-style:none; }
div{ width:700px; height:500px; margin:100pxauto; position:relative; /*background:pink;*/ }
.points{ position:absolute; width:100%; display:flex; justify-content:center; bottom:10px; z-index:1; }
.pointsli{ width:20px; height:20px; background:#fff; border-radius:50%; margin:10px; }
.bannerimgs{ width:700px; height:500px; }
.bannerimgsli{ width:700px; height:500px; opacity:0; position:absolute; top:0; left:0; }
.bannerimgsliimg{ width:100%; height:100%; }
.active{ background-color:red!important; }
.show{ opacity:1!important; transition:0.5s; }
span{ width:30px; height:30px; text-align:center; line-height:30px; border-radius:50%; background:rgba(0,0,0,.5); position:absolute; top:0; bottom:0; margin:auto; }
.next{ right:0; } </style> </head>
<body> <div> <ulclass="points"> <liclass="active"></li> <li></li> <li></li> <li></li> </ul> <ulclass="bannerimgs"> <liclass="show"><imgsrc="../img/index_04.jpg"alt=""></li> <li><imgsrc="../img/2.jpg"alt=""> </li> <li><imgsrc="../img/index_06.jpg"alt=""> </li> <li><imgsrc="../img/index_08.jpg"alt=""></li> </ul> <spanclass="prev"><</span> <spanclass="next">></span> </div> <script> varoPoints=document.querySelectorAll('.pointsli') varoBannerImgs=document.querySelectorAll('.bannerimgsli') varprev=document.querySelector('.prev') varnext=document.querySelector('.next') vart=null; varindex=0; //繫結點選事件 for(vari=0;i<oPoints.length;i++){ oPoints[i].index=i oPoints[i].onclick=function(){ clearInterval(t) for(varj=0;j<oPoints.length;j++){ oPoints[j].classList.remove('active') oBannerImgs[j].classList.remove('show') } this.classList.add('active') varx=this.index oBannerImgs[x].classList.add('show') } } //自動播放 clearInterval(t) t=setInterval(function(){ index++; if(index>=oPoints.length){ index=0 } for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') },2000) //上翻頁 prev.onclick=function(){ clearInterval(t) index-- if(index<=-1){ index=oPoints.length-1 }
for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') } //下翻頁 next.onclick=function(){ clearInterval(t) index++ if(index>=oBannerImgs.length){ index=0 } for(vari=0;i<oPoints.length;i++){ oPoints[i].classList.remove('active') oBannerImgs[i].classList.remove('show') } oPoints[index].classList.add('active') oBannerImgs[index].classList.add('show') } </script> </body>
</html>