轮播图模板，直接复制粘贴，修改图片路径就可以用

做一道光

已于 2022-05-26 10:30:39 修改

阅读量603

点赞数 2

分类专栏：封装的控件 web前端文章标签： javascript sass css

于 2022-05-09 18:06:24 首次发布

本文链接：https://blog.csdn.net/weixin_59334478/article/details/124671827

版权

封装的控件同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

web前端

7 篇文章 1 订阅

订阅专栏

html界面代码,文件名show.php

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,
  minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!--引入CSS代码-->
  <link rel="stylesheet" type="text/css" href="./css/testPic1.css" />
  <!--引入Js代码-->
  <script src="./css/testPic1.js"></script>
  <title>Js实现轮播图</title>
 </head>
 <body>
  <div class="lunbo">
   <div class="content">
   <ul id="item">
    <li class="item active">
     <a href="#" ><img src="./images/lunbo1.jpeg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="./images/lunbo2.jpeg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="./images/lunbo3.jpeg" ></a>
    </li>
   </ul>
   <div id="btn-left"><</div>
   <div id="btn-right">></div>
   <ul id="circle">
    
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
   </ul>
   </div>
  </div>
 </body>
</html>

css文件代码,文件名：testPic1.css

*{
 margin: 0;
 padding: 0;
}
a{
 list-style: none;
}
li{
 list-style: none;
}
.lunbo{
 width: 100%;
}
.content{
 width: 650px;
 height: 200px;
 margin: 20px auto;
 position: relative;
}
#item{
 width: 100%;
 height: 100%;
  
}
.item{
 position: absolute;
 opacity: 0;
 transition: all 1s;
  
}
.item.active{
 opacity:1;
}
img{
 width: 100%;
}
#btn-left{
 width: 30px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left:5px;
 z-index: 10;/*始终显示在图片的上层*/
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
 cursor: pointer;
 opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
 /*鼠标滑入，显示图标*/
 opacity: 1;
}
 
#btn-right{
 width: 26px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left: 5px;
 z-index: 10;
 position: absolute;
 right: 0;
 top: 50%;
 cursor: pointer;
 opacity: 0;
 transform: translateY(-60%);
}
.lunbo:hover #btn-right{
 opacity: 1;
}
#circle{
 height: 20px;
 display: flex;
 position: absolute;
 bottom: 35px;
 right: 25px;
}
.circle{
 width: 10px;
 height: 10px;
 border-radius: 10px;
 border: 2px solid white;
 background: rgba(0,0,0,0.4);
 cursor: pointer;
 margin: 5px;
}
.white{
 background-color: #FFFFFF;
}

js文件代码,文件名：testPic1.js

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;
 
//清除class
var clearclass=function(){
 for(let i=0;i<items.length;i++){
  items[i].className="item";
  circles[i].className="circle";
  circles[i].setAttribute("num",i);
 }
}
/*只显示一个class*/
function move(){
 clearclass();
 items[index].className="item active";
 circles[index].className="circle white";
}
//点击右边按钮切换下一张图片
rightBtn.onclick=function(){
 if(index<items.length-1){
  index++;
 }
 else{
  index=0;
 }
 move();
}
//点击左边按钮切换上一张图片
leftBtn.onclick=function(){
 if(index<items.length){
  index--;
 }
 else{
  index=items.length-1;
 }
 move();
}
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
 rightBtn.onclick();
},1500)
//点击圆点时，跳转到对应图片
for(var i=0;i<circles.length;i++){
 circles[i].addEventListener("click",function(){
  var point_index=this.getAttribute("num");
  index=point_index;
  move();
 })
 
}
//鼠标移入清除定时器，并开启一个三秒的定时器，使慢慢转动
content.onmouseover=function(){
 clearInterval(timer);
  timer=setInterval(function(){
   rightBtn.onclick();
  },3000)
}
//鼠标移出又开启定时器
content.onmouseleave=function(){
 clearInterval(timer);
 timer=setInterval(function(){
  rightBtn.onclick();
 },1500)
}
}

下面是展示效果图

轮播框的大小是根据图片大小来设定的，所以尽量选择图片的大小一样的，根据图片的大小修改css文件的这里的宽度和高度

.content{
width: 650px;
height: 200px;
margin: 20px auto;
position: relative;
}

当然也可以同时修改图片大小和上面的.content，只要保持它们的width和height是一样的就可以了。

li{
list-style: none;

width:

height:
}

做一道光

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
4
评论
轮播图模板，直接复制粘贴，修改图片路径就可以用

html界面代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" />  <link r
复制链接

扫一扫