You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.7 KiB
139 lines
3.7 KiB
<!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>
|
|
.dots {
|
|
cursor: pointer;
|
|
background-color: #bbb;
|
|
height: 15px;
|
|
width: 15px;
|
|
margin: 0 2px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
li {
|
|
list-style-type: circle;
|
|
float: left;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="qwer">
|
|
<div>
|
|
<button class="but1">
|
|
< </button>
|
|
<img src="" alt="">
|
|
<button class="but2">></button>
|
|
</div>
|
|
<div>
|
|
<ul class="yd">
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="dots">
|
|
|
|
</div> -->
|
|
|
|
<script>
|
|
let imgs = [
|
|
{ src: "imgs/10-01.png" },
|
|
{ src: "imgs/10-02.png" },
|
|
{ src: "imgs/11-00.gif" },
|
|
{ src: "imgs/11-01.gif" },
|
|
{ src: "imgs/11-02.gif" },
|
|
{ src: "imgs/11-03.gif" },
|
|
{ src: "imgs/11-04.png" },
|
|
{ src: "imgs/11-05.png" },
|
|
]
|
|
|
|
const img = document.querySelector('img')
|
|
let i = 0
|
|
//body
|
|
const sxxt = document.querySelector('.qwer')
|
|
console.log(sxxt);
|
|
|
|
sxxt.onload = function () {
|
|
img.src = imgs[i].src
|
|
ull[i].style.listStyleType = "disc"
|
|
}
|
|
//
|
|
//下一页
|
|
function swichh() {
|
|
// i++
|
|
// i%=imgs.length
|
|
i >= imgs.length - 1 ? i = 0 : i++
|
|
img.src = imgs[i].src
|
|
console.log(i);
|
|
ull[i].style.listStyleType = "disc"
|
|
i == 0 ? ull[imgs.length - 1].style.listStyleType = "circle" : ull[i - 1].style.listStyleType = "circle"
|
|
}
|
|
//上一页
|
|
const syy = document.querySelector('.but1')
|
|
function sbdj() {
|
|
i <= 0 ? i = imgs.length - 1 : i--
|
|
img.src = imgs[i].src
|
|
console.log(i);
|
|
ull[i].style.listStyleType = "disc"
|
|
i == imgs.length - 1 ? ull[0].style.listStyleType = "circle" : ull[i + 1].style.listStyleType = "circle"
|
|
}
|
|
syy.addEventListener("click", sbdj)
|
|
// function sbyd(){
|
|
// but.style.backgroundColor="red"
|
|
// but.style.width="100px"
|
|
// }
|
|
function sbyk() {
|
|
but.style.width = "100px"
|
|
but.style.height = "100px"
|
|
but.style.backgroundColor = "blue"
|
|
}
|
|
const but = document.querySelector('.but2 ')
|
|
//自动
|
|
setInterval(function () {
|
|
but.click()
|
|
}, 2000)
|
|
|
|
|
|
// 事件监听
|
|
but.addEventListener("click", swichh)
|
|
//鼠标移动到元素上
|
|
// but.addEventListener("mouseenter", sbyd)
|
|
//匿名函数
|
|
// but.addEventListener("mouseenter", function () {
|
|
// but.style.backgroundColor = "red"
|
|
// but.style.width = "100px"
|
|
// })
|
|
// but.addEventListener("mouseover",sbyd)
|
|
// but.addEventListener("mouseout", sbyk)
|
|
//鼠标移到
|
|
// but.onmouseenter = function () {
|
|
// but.style.backgroundColor = "red"
|
|
// but.style.width = "100px"
|
|
// }
|
|
//圆点
|
|
for (let i = 0; i < imgs.length; i++)
|
|
document.write(`
|
|
<li></li>
|
|
`)
|
|
const ull = document.querySelectorAll('li')
|
|
console.log(ull);
|
|
//点击圆点
|
|
ull[i].addEventListener('click',djyd)
|
|
function djyd(){
|
|
console.log(11111);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |