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