滚动式轮播图

图片是在线引入,直接复制下面代码就可以看到效果

Css

*{

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }

    li{

      list-style: none;

    }

    .box{

      width: 820px;

      height: 380px;

      margin: 30px auto;

      overflow: hidden;

    }

    ul{

      width: calc(820px * 5);

      height: 340px;

      background-color: black;

      transition: 1s;

    }

    ul li{

      float: left;

    }

    ul li img{

      display: block;

    }

    .nav{

      width: 100%;

      height: 40px;

      display: flex;

    }

    .nav div{

      height: 40px;

      flex: 1;

      text-align: center;

      line-height: 40px;

      background-color: #e3e2e2;

      cursor: pointer;

    }

    .nav .active{

      background-color: white;

      border-bottom: 2px solid #cea861;

    }

Html

<div class="box">

    <ul id="wrap">

      <li>< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220729/a996ffd9672a002d411176cbf97e901e.jpeg" alt=""></li>

      <li>< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220729/c607f6fdc17f83f7ef0bf22b4b713af8.jpeg" alt=""></li>

      <li>< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220722/6e380c555ce2e06ba645d462960bc8f3.jpeg" alt=""></li>

      <li>< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220801/52306d5b47773e17c469ea2f30bd15af.jpeg" alt=""></li>

      <li>< img src="https://ossweb-img.qq.com/upload/adw/image/977/20220801/3cd94d43d7f0994ae93c4efd1518f683.jpeg" alt=""></li>

    </ul>

    <div class="nav" id="navv">

      <div class="active">星之守护者2022</div>

      <div>时空召唤</div>

      <div>星之守护者通行证</div>

      <div>LPL夏季赛</div>

      <div>星守璐璐 手办开售</div>

    </div>

  </div>

Js

//获取元素

    let navs=navv.getElementsByTagName('div')

    //导航鼠标滑过效果

    for(let n=0;n<navs.length;n++){

      navs[n].index=n

      navs[n].onmouseenter=function(){

        for(let j=0;j<navs.length;j++){

          navs[j].className=""

        }

        this.className='active'

        wrap.style.marginLeft=-this.index*820+"px"

      }

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Label的作用是什么?是怎么用的 答案: label标签来定义表单控制间的关系当用户选择该标签时,浏览 器会自动...
    你会挽着我的衣袖吗阅读 403评论 1 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,820评论 1 45
  • 前端 VScode 自动换行(word wrap) ctrl + s 保存 ctrl + a 全选 ctrl + ...
    东方寂明阅读 1,010评论 0 1
  • iframe 框架有那些优缺点? 优点iframe 能够原封不动的把嵌入的网页展现出来。如果有多个网页引用 ifr...
    蛋蛋大少爷阅读 747评论 0 1
  • vue实现照片选择或者拍照功能 照片格式校验, 图片质量压缩, 图片尺寸压缩, 图片离线保存, 图片base64编...
    洛音轩阅读 290评论 0 0