不依賴任何插件
效果：
源碼：
<!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=)