本案例思路：
利用ul li标签实现圆点按钮，按动具体按钮，使得对应索引的图片跳转出来
使用到：
- index()函数：在多个统计标签匹配的情况下，获取对应元素的下标
- siblings('标签')：根据需求匹配出兄弟元素
- eq(index)函数：当jquerydDom可以匹配到多个的时候，用eq()函数来取出具体第几个，索引从0开始
- $(this)：代表当前操作的DOM对象（用于可以匹配到多个，如果需要获取具体的dom时使用）
- opacity：设置标签背景的透明度（0~1），区别于rgba()设置法的是，opacity用于设置标签背景及文字、图片等透明，而rgba()方法仅用于设置背景透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#app{
height: 692px;
width: 690px;
border: 2px solid #000000;
margin: 50px auto;
position: relative;
}
#app>div{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
#app>#btn{
position: absolute;
right: 10px;
bottom: 20px;
}
#btn>li{
width: 14px;
height: 14px;
float: left;
list-style: none;
margin: 0 5px;
border: 2px solid #FFFFFF;
border-radius: 7px;
background: #7F7F7F;
}
#btn>li:hover{
border: 2px solid #7F7F7F;
background: #FFFFFF;
}
#app>div:nth-child(1) {
background: url(img/1.jpg);
opacity: 1;
}
#app>div:nth-child(2) {
background: url(img/2.jpg);
}
#app>div:nth-child(3) {
background: url(img/3.jpg);
}
#app>div:nth-child(4) {
background: url(img/4.jpg);
}
#app>div:nth-child(5) {
background: url(img/5.jpg);
}
#app>div:nth-child(6) {
background: url(img/6.jpg);
}
</style>
</head>
<body>
<div id="app">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<ul id="btn">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function(){
$("#app>#btn>li").click(function(){
let index = $(this).index()
$("#app>div").eq(index).css({opacity: '1'}).siblings('div').css({opacity: '0'})
})
})
</script>
</body>
</html>
效果图：
加入图片自动轮播功能：（使用到定时器函数）
使用到：
- setInterval(function，间隔时间)：这个函数设置的是间隔时间，会不断的执行
- setTimeout(function，延时时间)：这个函数设置延时函数是为了在过后的某一时刻执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
@keyframes myFadeIn{
from{
left: 750px;
}
to{
left: 0px;
}
}
@-webkit-keyframes myFadeIn{
from{
left: 750px;
}
to{
left: 0px;
}
}
@-moz-keyframes myFadeIn{
from{
left: 750px;
}
to{
left: 0px;
}
}
@-o-keyframes myFadeIn{
from{
left: 750px;
}
to{
left: 0px;
}
}
@keyframes myFadeOut{
from{
left: 0px;
}
to{
left: -750px;
}
}
@-webkit-keyframes myFadeOut{
from{
left: 0px;
}
to{
left: -750px;
}
}
@-moz-keyframes myFadeOut{
from{
left: 0px;
}
to{
left: -750px;
}
}
@-o-keyframes myFadeOut{
from{
left: 0px;
}
to{
left: -750px;
}
}
#app>.show{
animation: myFadeIn 1s linear forwards;
-webkit-animation: myFadeIn 1s linear forwards;
-moz-animation: myFadeIn 1s linear forwards;
-o-animation: myFadeIn 1s linear forwards;
}
#app>.hide{
animation: myFadeOut 1s linear forwards;
-webkit-animation: myFadeOut 1s linear forwards;
-moz-animation: myFadeOut 1s linear forwards;
-o-animation: myFadeOut 1s linear forwards;
}
#app{
width: 750px;
height: 500px;
border: 2px solid #0000FF;
position: absolute;
top: calc((100vh - 500px) / 2);
left: calc((100vw - 750px) / 2);
overflow: hidden;
}
#app>div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0px;
}
#app>.btn{
position: absolute;
right: 20px;
bottom: 15px;
}
.btn>li{
width: 20px;
height: 20px;
border-radius: 10px;
border:2px solid #FFFFFF;
background: #7F7F7F;
float: left;
list-style: none;
margin: 0px 5px;
}
.btn>li:hover{
border-color: #7F7F7F;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
$(function(){
const images = [
'img/111.jpg',
'img/222.jpg',
'img/333.jpg',
'img/444.jpg',
'img/555.jpg',
'img/666.jpg'
]
const ul = $('<ul class="btn"></ul>')
for(let i = 0; i < images.length; i++){
$('<div></div>').css({
background: 'url(' + images[i] + ')'
}).appendTo($('#app'))
$('<li></li>').appendTo(ul)
}
ul.appendTo($("#app"))
let index = 0
setInterval(function(){
//一个标签加入show类后，就不能有hide，所以需要使用removeClass去掉hide类
$('#app>div').eq(index).addClass('show').removeClass('hide').siblings('div').addClass('hide').removeClass('show')
index++
if(index === images.length){
index = 0
}
}, 3000)
})
</script>
</body>
</html>