滚动式轮播图

小百前端-历险记

已于 2022-08-05 17:20:29 修改

阅读量195

点赞数

分类专栏：前端文章标签：前端 javascript html css

于 2022-08-02 22:21:53 首次发布

本文链接：https://blog.csdn.net/Bai_CYK/article/details/126131451

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文展示了如何使用CSS、HTML和JavaScript创建一个具有滑动导航栏和图片轮播效果的网页组件。通过CSS实现无边距、浮动布局和过渡效果，HTML结构定义了图片列表和导航按钮，而JavaScript则处理了导航栏的鼠标滑过效果及图片轮播的平滑切换。

摘要由CSDN通过智能技术生成

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

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"


      }


    }