js题目12

最新推荐文章于 2025-05-28 19:34:53 发布

3283478051Sun

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量143

点赞数 1

文章标签： javascript css 开发语言

本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145345683

版权

<!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>
    .whole{
      width: 500px;
      height: 500px;
      margin: 0 auto;
      position: relative;
    }
    .left,.right{
      width: 20px;
      height: 20px;
      font-size: 20px;
      position: absolute;
      top: 230px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e7e6e6;
      cursor: pointer;
      display: none;
    }
    .left{
      left: 0;
    }
    .right{
      right: 0;
    }
    img{
      width: 500px;
      height: 480px;
    }
    .bottom{
      width: 500px;
      height: 30px;
      background-color: #e7e6e6;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
    }
    .it{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #565656;
      margin: 10px;
      opacity: 0.5;
    }
    .hl{
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="whole">
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
    <div class="content">
      <div class="item">
        <img src="./static/300 1.webp" alt="" title="orange">
      </div>
    </div>
    <div class="bottom">
      <div class="it hl"></div>
      <div class="it"></div>
      <div class="it"></div>
      <div class="it"></div>
      <div class="it"></div>
    </div>
  </div>
  <script>
    const data=[
      { url:'./static/300 1.webp',title:'orange'},
      { url:'./static/300 2.webp',title:'car'},
      { url:'./static/300 3.webp',title:'colorful'},
      { url:'./static/300 4.webp',title:'girl'},
      { url:'./static/300 5.webp',title:'carton'},
    ]
    const img=document.querySelector('.item img')
    const right=document.querySelector('.right')
    let i=0
    right.addEventListener('click',function(){
      i++
      if(i>=data.length){
        i=0
      }
      img.src=data[i].url
      img.title=data[i].title
      document.querySelector('.hl').classList.remove('hl')
      document.querySelector(`.it:nth-child(${i+1})`).classList.add('hl')
    })
    const left=document.querySelector('.left')
    left.addEventListener('click',function(){
      i--
      if(i<0){
        i=data.length-1
      }
      img.src=data[i].url
      img.title=data[i].title
      document.querySelector('.hl').classList.remove('hl')
      document.querySelector(`.it:nth-child(${i+1})`).classList.add('hl')
    })
    let time=setInterval(function(){
      right.click()
    },1000)
    const whole=document.querySelector('.whole')
    whole.addEventListener('mouseenter',function(){
      clearInterval(time)
      right.style.display='block'
      left.style.display='block'
    })
    whole.addEventListener('mouseleave',function(){
      time=setInterval(function(){
      right.click()
    },1000)
    right.style.display='none'
    left.style.display='none'
    })
    const its=document.querySelectorAll('.it')
    for(let i=0;i<its.length;i++){
      its[i].addEventListener('mouseenter',function(){
        document.querySelector('.hl').classList.remove('hl')
        this.classList.add('hl')
        img.src=data[i].url
        img.title=data[i].title
      })
    }
  </script>
</body>
</html>

屏幕录制 2025-01-24 192948