剛學著js，然后想著自己試著寫一個輪播，完事之后輪播效果實作了，可是淡入淡出效果沒實作，沒想明白問題在哪，請各位大佬們幫忙看下，其中要是有別的問題也可以指出來，小弟在這謝謝了。
代碼如下：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bbs.csdn.net/topics/style.css">
<title>輪播圖</title>
</head>
<body>
<div id="wrapper">
<div id="con">
<img src="https://img.uj5u.com/2020/10/29/152702290909081.png" alt="很抱歉">
<img src="https://img.uj5u.com/2020/10/29/152702290909082.png" alt="很抱歉">
<img src="https://img.uj5u.com/2020/10/29/152702290909083.png" alt="很抱歉">
<img src="https://img.uj5u.com/2020/10/29/152702290909084.png" alt="很抱歉">
<img src="https://img.uj5u.com/2020/10/29/152702290909085.png" alt="很抱歉">
<img src="https://img.uj5u.com/2020/10/29/152702290909086.png" alt="很抱歉">
</div>
<div class="img_switch">
<img src="https://img.uj5u.com/2020/10/29/152702290909087.png" alt="很抱歉" id="arrow_left">
<img src="https://img.uj5u.com/2020/10/29/152702290909087.png" alt="很抱歉" id="arrow_right">
</div>
<ul id="img_nav">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://bbs.csdn.net/topics/js/addLoadEven.js"></script>
<script src="https://bbs.csdn.net/topics/js/index.js"></script>
</body>
</html>
CSS：
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
/* 大盒子 */
#wrapper{
width: 1200px;
height: 500px;
overflow: hidden;
margin: 10% auto;
position: relative;
cursor: pointer;
}
/* 圖片總體 */
#con{
width: 100%;
height: 100%;
float: left;
}
/* 圖片 */
#con img{
display: block;
width: 100%;
height: 100%;
transition: all 1s;
}
/* 左右切換 */
.img_switch{
width: 100%;
height: 100px;
/* background-color: pink; */
text-align: center;
line-height: 120px;
position: absolute;
top: 50%;
margin-top: -50px;
}
#arrow_left{
position: absolute;
top: 35%;
left: 2%;
transform: rotate(180deg);
cursor: pointer;
}
#arrow_left:hover,
#arrow_right:hover{
background-color: gray;
opacity: .8;
}
#arrow_right{
position: absolute;
top: 35%;
right: 2%;
}
/* 小標點導航 */
#img_nav{
width: 150px;
height: 10px;
position: absolute;
top: 90%;
right: 5%;
/* background-color: pink; */
}
li{
float: left;
margin-left: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
box-shadow: 0 0 5px #fff inset;
cursor: pointer;
}
.active{
background-color: orange;
box-shadow: 0 0 2px #fff inset;
}
JavaScript:
// 實作快速添加id
function byId(id) {
return typeof (id) == "string" ? document.getElementById(id) : id;
};
let wrapper = byId("wrapper");
let con = byId("con");
let conImg = con.getElementsByTagName("img");
let arrowLeft = byId("arrow_left");
let arrowRight = byId("arrow_right");
let imgNav = byId("img_nav");
let imgNavList = imgNav.getElementsByTagName("li");
let time = null;
let index = 0;
// 切換
function switchImg() {
for (let i = 0; i < conImg.length; i++){
conImg[i].style.display = "none";
conImg[i].style.opacity = "0";
imgNavList[i].className = "";
}
conImg[index].style.display = "block";
conImg[index].style.opacity = "1";
imgNavList[index].className = "active";
}
// 定時輪播
function timSwitch() {
time = setInterval(function () {
index++;
if (index >= conImg.length) index = 0;
switchImg();
},2000)
}
// 清除定時器
function stopRotating() {
clearTimeout(time);
}
// 兼容系結事件函式
let bindEvent = {
//添加
addEvent: function (elem, type, handler) {
if (elem.addEventListener) {
elem.addEventListener(type, handler, false);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, handler);
} else {
elem["on" + type] = null;
}
},
// 洗掉
removeEvent: function (elem, type, handler) {
if (elem.removeEventListener) {
elem.removeEventListener(type, handler, false);
} else if (elem.detachEventListener) {
elem.detachEventListener("on" + type, handler);
} else {
elem["on" + type] = null;
}
}
}
// 開始輪播
timSwitch();
// 上一頁
bindEvent.addEvent(arrowLeft, "click", function () {
index--;
if (index < 0) index = 5;
switchImg();
});
// 下一頁
bindEvent.addEvent(arrowRight, "click", function () {
index++;
if (index > 5) index = 0;
switchImg();
});
// 點擊小圓點切換
for (let i = 0; i < imgNavList.length; i++){
bindEvent.addEvent(imgNavList[i], "click", function () {
index = i;
switchImg();
});
}
// 滑鼠移入暫停輪播
bindEvent.addEvent(wrapper, "mouseover", stopRotating);
// 滑鼠移除開始輪播
bindEvent.addEvent(wrapper, "mouseout", timSwitch);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/195550.html
標籤：JavaScript
上一篇：控制臺報錯Cannot read property 'style' of null
下一篇：求一個JSON書寫格式是否正確？