不依赖任何插件
效果：
源码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出轮播图</title>
<style>
*{margin: 0; padding: 0;}
#container{
width: 590px;
height: 470px;
border: 1px solid black;
position: relative;
margin: auto;
top: 100px;
left: 0;
right: 0;
}
img{
position: absolute;
opacity: 0;
}
.show{
opacity: 1;
transition: all 3s;
}
#btn-box{
width: 100%;
font:30px/50px "";
text-align: center;
color: white;
position: absolute;
top: 200px;
display: flex;
justify-content: space-between;
}
#left,#right{
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
#point-box{
width: 120px;
position: absolute;
left: 30px;
right: 0;
bottom: 10px;
display: flex;
justify-content: space-between;
z-index: 10;
}
.point{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
border: 3px solid rgba(0,0,0,0);
cursor: pointer;
}
.active{
background-color: rgba(255,255,255,1);
border: 3px solid rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="container">
<div id="img-box">
<img class="show" src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
</div>
<div id="btn-box">
<p id="left"><</p>
<p id="right">></p>
</div>
<div id="point-box">
<p class="point active"></p>
<p class="point"></p>
<p class="point"></p>
<p class="point"></p>
<p class="point"></p>
</div>
</div>
</body>
</html>
<script>
function $(ele){
if(ele.charAt(0) === "#"){
return document.querySelector(ele);
}else{
return document.querySelectorAll(ele);
}
}
// 获取dom对象
var container = $("#container");
var left_btn = $("#left");
var right_btn = $("#right");
var imgs = $("img");
var points = $(".point");
// 定义变量存放当前图片编号
var index = 0;
// 创建一个函数
// 功能：实现图片的切换
// 参数：
// 参数1：str 决定图片的切换方向
// 传入的实参1为字符串“last”或“next” last:切换到上一张 next:切换到下一张
// 参数2：imgNum 图片的数量
function goImg( str, imgNum ){
imgs[index].className = ""; // 隐藏当前显示的图片
points[index].className = "point"; // 对应的小圆点恢复默认样式
if(str == "next"){ // 如果传入的实参为next 则切换到下一张
index++;
if(index>imgNum){ // 边界判断
index = 0; // 超出最大边界 置为最小值0 从头开始
}
}else if(str == "last"){ 如果传入的实参为 last 则切换到上一张
index--; // 边界判断
if(index<0){ // 超出最小边界
index = imgNum; // 置为最大值
}
}
imgs[index].className = "show"; // 显示当前应该显示的图片
points[index].className = "point active"; // 对应小圆点高亮显示
}
// 点击右箭头切换到下一张
right_btn.onclick = function(){
goImg("next",imgs.length-1);
}
// 点击左箭头切换到上一张
left_btn.onclick = function(){
goImg("last",imgs.length-1);
}
// 每隔3s自动切换到下一张
var timer = setInterval(function(){
goImg("next",imgs.length-1);
},3000);
// 鼠标移入时暂停切换
container.onmouseover = function(){
clearInterval(timer);
}
// 鼠标移出时继续切换
container.onmouseout = function(){
timer = setInterval(function(){
goImg("next",imgs.length-1);
},3000);
}
// 为每个小圆点绑定index属性，存放索引
for(var i=0; i<points.length; i++){
points[i].index = i;
}
// 点击小圆点切换到对应图片
for(let j=0; j<points.length; j++){
points[j].onclick = function(){
// 隐藏之前的图片，让对应的小圆点恢复默认样式
imgs[index].className = "";
points[index].className = "point";
// 记录当前小圆点的索引
index = this.index;
// 让当前小圆点高亮以及对应的图片显示
imgs[index].className = "show";
points[index].className = "point active";
}
}
</script>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)