parent
91fbc46910
commit
b27173f1e7
@ -0,0 +1,239 @@
|
||||
<!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>
|
||||
.main-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 590px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pic {
|
||||
|
||||
height: 300px;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.pic img {
|
||||
border: none;
|
||||
border-radius: 5%;
|
||||
width: 500px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
z-index: -100;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
font-size: 50px;
|
||||
line-height: 35px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.backbtn {
|
||||
position: relative;
|
||||
top: 100px;
|
||||
left: 10px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
float: left;
|
||||
|
||||
}
|
||||
|
||||
.nextbtn {
|
||||
position: relative;
|
||||
float: right;
|
||||
top: 35px;
|
||||
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 500px;
|
||||
height: 30px;
|
||||
|
||||
|
||||
position: relative;
|
||||
top: 300px;
|
||||
left: -50px;
|
||||
display: inline-block;
|
||||
list-style-type: circle;
|
||||
|
||||
}
|
||||
|
||||
.footer li {
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer li.active {
|
||||
list-style-type: disc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main-box">
|
||||
<button class="backbtn">
|
||||
< </button>
|
||||
<div class="pic">
|
||||
<img src="" title="">
|
||||
</div>
|
||||
<ul class="footer">
|
||||
|
||||
<script>
|
||||
let imgarr = [
|
||||
{ src: 'image/1rd.png' },
|
||||
{ src: 'image/2rd.jpg' },
|
||||
{ src: 'image/3rd.jpg' },
|
||||
{ src: 'image/4rd.jpg' }
|
||||
]
|
||||
const footer = document.querySelector('.footer')
|
||||
|
||||
for (let x = 0; x < imgarr.length; x++) {
|
||||
document.write(`<li></li>`)
|
||||
const li =document.querySelector(`.footer li:nth-child(${x+2})`)
|
||||
li.addEventListener('click',function (){img.src = imgs[x].src})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</ul>
|
||||
<button class="nextbtn">></button>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
let imgs = [
|
||||
{ src: 'image/1rd.png' },
|
||||
{ src: 'image/2rd.jpg' },
|
||||
{ src: 'image/3rd.jpg' },
|
||||
{ src: 'image/4rd.jpg' }
|
||||
]
|
||||
|
||||
const img = document.querySelector('img')
|
||||
const nextbtn = document.querySelector('.nextbtn')
|
||||
const body = document.querySelector('body')
|
||||
const backbtn = document.querySelector('.backbtn')
|
||||
let i = 0
|
||||
x=i
|
||||
function nextimg() {
|
||||
|
||||
console.log(i)
|
||||
|
||||
|
||||
|
||||
if (i < (imgs.length - 1)) {
|
||||
i++
|
||||
const li = document.querySelector(`.footer li:nth-child(${i + 2})`)
|
||||
li.classList.toggle('active')
|
||||
let li3 = document.querySelector(`.footer li:nth-child(${i + 1})`)
|
||||
.classList.remove('active')
|
||||
}
|
||||
|
||||
else {
|
||||
i = 0
|
||||
const li4 = document.querySelector(`.footer li:nth-child(${imgs.length + 1})`)
|
||||
li4.classList.remove('active')
|
||||
const li5 = document.querySelector(`.footer li:nth-child(${2})`)
|
||||
li5.classList.add('active')
|
||||
|
||||
|
||||
}
|
||||
//const li = document.querySelector(`.footer li:nth-child(${i+2})`)
|
||||
//li.classList.toggle('active')
|
||||
img.src = imgs[i].src
|
||||
|
||||
|
||||
//let li3 = document.querySelector(`.footer li:nth-child(${i+1})`)
|
||||
//.classList.remove('active')
|
||||
|
||||
}
|
||||
|
||||
|
||||
function backimg() {
|
||||
|
||||
|
||||
if (i > 0) {
|
||||
i--
|
||||
console.log(i)
|
||||
const li = document.querySelector(`.footer li:nth-child(${i + 2})`)
|
||||
li.classList.toggle('active')
|
||||
let li3 = document.querySelector(`.footer li:nth-child(${i + 3})`)
|
||||
li3.classList.remove('active')
|
||||
}
|
||||
else {
|
||||
i = imgs.length - 1
|
||||
const li4 = document.querySelector(`.footer li:nth-child(${imgs.length + 1})`)
|
||||
li4.classList.add('active')
|
||||
const li5 = document.querySelector(`.footer li:nth-child(${2})`)
|
||||
li5.classList.remove('active')
|
||||
|
||||
}
|
||||
img.src = imgs[i].src
|
||||
console.log(i)
|
||||
|
||||
|
||||
|
||||
}
|
||||
let n = setInterval(nextimg, 1000)
|
||||
function stop(){
|
||||
clearInterval(n)
|
||||
}
|
||||
function cont(){
|
||||
n =setInterval(nextimg,1000)
|
||||
}
|
||||
function switchColor() {
|
||||
nextbtn.style.background = 'rgba(255, 255, 255, 0.5)'
|
||||
clearInterval(n)
|
||||
}
|
||||
function switchColor2() {
|
||||
backbtn.style.background = 'rgba(255, 255, 255, 0.5)'
|
||||
clearInterval(n)
|
||||
}
|
||||
function backColor() {
|
||||
nextbtn.style.background = ''
|
||||
n = setInterval(nextimg, 1000)
|
||||
}
|
||||
function backColor2() {
|
||||
backbtn.style.background = ''
|
||||
n = setInterval(nextimg, 1000)
|
||||
}
|
||||
nextbtn.addEventListener('click', nextimg)
|
||||
nextbtn.addEventListener('mouseenter', switchColor)
|
||||
nextbtn.addEventListener('mouseout', backColor)
|
||||
backbtn.addEventListener('click', backimg)
|
||||
backbtn.addEventListener('mouseenter', switchColor2)
|
||||
backbtn.addEventListener('mouseout', backColor2)
|
||||
img.addEventListener('mouseover',stop)
|
||||
img.addEventListener('mouseout',cont)
|
||||
|
||||
body.onload = function () {
|
||||
img.src = imgs[0].src
|
||||
const li2 = document.querySelector(`.footer li:nth-child(${2})`)
|
||||
li2.classList.add('active')
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue