用原生的js实现轮播图
全部实现完毕！收工！轮播图告一段落！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>轮播图效果</title>
<style>
/* 清空边距 */
*{
margin: 0;
padding: 0;
}
/* 轮播图样式 */
img{
width: 500px;
height: 300px;
}
li{
list-style: none;
float: left;
}
ul{
width: 2500px;
position: absolute;
top: 0px;
/* 设置右边的距离即可 */
left: 0px;
transition-duration: 1s; /* 如果不想要轮播效果可以把这行代码注释掉 */
}
div{
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
top: 100px;
left: 400px;
}
/* 左右两侧样式 */
div:hover .direction{
display: block;
background-color: grey;
}
.direction{
position: absolute;
font-size: 50px;
cursor: pointer;
display: none;
border-radius: 50%;
opacity: 0.5;
}
#left{
top: 110px;
left: 30px;
}
#right{
top: 110px;
right: 30px;
}
/* 下面五个点 */
.dot{
width: 20px;
height: 20px;
background-color: grey;
display: inline-block;
margin-left: 30px;
cursor: pointer;
}
#active{
background-color: red;
}
.dots{
/* background-color: red; */
width: 300px;
height: 10px;
position: absolute;
left: 100px;
margin-top: 170px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<span class="direction" id="left"> < </span>
<span class="direction" id="right"> > </span>
<div class="dots">
<span id="active" class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<!--
需求功能：
- 自动切换轮播效果 完成！
- 鼠标移上去就会停下来 完成！
- 鼠标移开就会继续切换 完成！
- 向左向右切换 完成！
- 点击小圆点切换 完成！
-->
<script>
let pos = 0;
let timer;
let num;
// 对应小红点亮函数
function toRed(){
let dots = document.querySelectorAll(".dot");
for(let i=0; i<dots.length; i++){
dots[i].id = "";
}
num = -pos/500;
dots[num].id = "active";
}
function setTimer(){
timer = setInterval(()=>{
document.querySelector("ul").style.left = pos + "px";
// 对应点亮起来
toRed();
// 递减
pos -= 500;
if(pos == -2500){
pos = 0;
}
}, 4000)
}
setTimer();
// 移入停下，移开运行
document.querySelector("div").addEventListener("mouseover", ()=>{
clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", ()=>{
setTimer();
})
// 左右两边
document.querySelector("#left").addEventListener("click", ()=>{
pos += 500;
if(pos == 500){
pos = -2000;
}
document.querySelector("ul").style.left = pos + "px";
toRed();
})
document.querySelector("#right").addEventListener("click", ()=>{
pos -= 500;
if(pos == -2500){
pos = 0;
}
document.querySelector("ul").style.left = pos + "px";
toRed();
})
// 点击小圆点对应亮色
let dots = document.querySelectorAll(".dot");
for(let i=0; i<dots.length; i++){
(function(i){
dots[i].addEventListener("click", ()=>{
num = i;
pos = -num*500;
document.querySelector("ul").style.left = pos + "px";
toRed();
})
})(i)
}
</script>
</body>
</html>
轮播图2.0（有淡入淡出效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
div{
margin: 100px auto;
width: 500px;
height: 300px;
position: relative;
}
ul{
position: relative;
}
li{
list-style: none;
position: absolute;
opacity: 0;
transition-duration: 3s;
}
li:first-child{
opacity: 1;
}
img{
width: 500px;
height: 300px;
}
div:hover span{
display: block;
}
span{
position: absolute;
font-size: 50px;
cursor: pointer;
display: none;
background-color: grey;
border-radius: 50%;
opacity: 0.5;
}
span:first-of-type{
left: 20px;
top: 110px;
}
span:last-of-type{
right: 20px;
top: 110px;
}
a{
position: absolute;
width: 50px;
height: 5px;
background-color: grey;
cursor: pointer;
}
a:first-of-type{
bottom: 10px;
left: 100px;
background-color: red;
}
a:nth-of-type(2){
bottom: 10px;
left: 160px;
}
a:nth-of-type(3){
bottom: 10px;
left: 220px;
}
a:nth-of-type(4){
bottom: 10px;
left: 280px;
}
a:nth-of-type(5){
bottom: 10px;
left: 340px;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<span class="left"> < </span>
<span class="right"> > </span>
<a></a>
<a></a>
<a></a>
<a></a>
<a></a>
</div>
<!--
需求功能：
- 自动切换轮播效果 完成！
- 鼠标移上去就会停下来 完成！
- 鼠标移开就会继续切换 完成！
- 向左向右切换 完成
- 点击小圆点切换
-->
<script>
let num = 0;
let timer;
function AddTimer(num){
timer = setInterval(()=>{
ChangePic(num);
num++;
if(num == 5){
num = 0;
}
}, 3000);
}
function ChangePic(num){
for(let i of document.querySelectorAll("li")){
i.style.opacity = "0";
}
toRed(num);
document.querySelectorAll("li")[num].style.opacity = "1";
}
function toRed(num){
for(let i of document.querySelectorAll("a")){
i.style.backgroundColor = "grey";
}
document.querySelectorAll("a")[num].style.backgroundColor = "red";
}
AddTimer(num);
// 小圆点
for(let i=0; i < document.querySelectorAll("a").length; i++){
console.log(i);
document.querySelectorAll("a")[i].addEventListener("click", ()=>{
num = i;
ChangePic(num);
})
}
// 左
document.querySelector(".left").addEventListener("click", ()=>{
num --;
if(num == -1){
num = 4;
}
console.log(num);
ChangePic(num);
})
// 右
document.querySelector(".right").addEventListener("click", function(){
num ++;
if(num == 5){
num = 0;
}
console.log(num);
ChangePic(num);
})
// 鼠标移入移开
document.querySelector("div").addEventListener("mouseover", ()=>{
clearInterval(timer);
})
document.querySelector("div").addEventListener("mouseout", ()=>{
AddTimer(num);
})
</script>
</body>
</html>
