【HTML5】轮播图的实现方式一

实现思路:

采用老式放映机的原理,将轮播图的图片放在类似放映机的胶卷上,然后根据需求左右拉动胶卷从而播放胶卷上的图片。下列代码中的无序列表ul则相当与胶卷一样。

1.页面整体布局

复制代码
<div class="banner">
        <div class="banner_wraper">
            <ul class="banner_wraper_list">
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_01.jpg"></a></li>
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_02.jpg"></a></li>
                <li class="banner_wraper_list_item"><a href="###"><img src="./images/banner_pic_03.jpg"></a></li>
            </ul>
            <button class="banner_wraper_left_btn h_btn iconfont icon-left"></button>
            <button class="banner_wraper_right_btn h_btn iconfont icon-right"></button>
            <div class="banner_wraper_btn_box">
                <span>1</span><span class="active">2</span><span>3</span>
            </div>
        </div>
    </div>

2.css样式

复制代码
.banner{
    height: 300px;
    position: relative;
    overflow: hidden;
}
.banner_wraper{
    width: 1920px;
    height: 300px;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    overflow: hidden;
    border: 2px solid red;
}
.banner_wraper_list{
    height: 300px;
    width: 5780px; /*临时宽度*/
    position: absolute;
    left: 0;
    transition: 0.3s;
    border: 1px solid blue;
}
.banner_wraper_list_item{
    float: left;
}
.banner_wraper_left_btn {
 left: 400px;
}
/* 这里两个按钮相同样式可以合并一下 */
.banner_wraper_right_btn { 
    right: 400px;}
.h_btn{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    border: none;
    color: white;
    font-size: 30px;
    background-color:rgba(0,0,0,0.8); 
}
.banner_wraper_btn_box{
    position: absolute;
    left: 50%;
    margin-left: -75px;
    bottom: 10px;
    width: 150px;
    height: 10px;
    display: flex;
}
.banner_wraper_btn_box span {
   flex: 1;
   cursor: pointer;
   text-indent: -99999px;
   background-color:#09c762 ;
}
.banner_wraper_btn_box .active{
    background-color: white;
}

3.js部分

复制代码
window.onload = function(){
    //轮播图
    carousel()
}
function carousel(){
 //第一步: 获取所有要用到的标签
    let Banner= document.querySelector('.banner');
    let BannerWraperList = document.querySelector('.banner_wraper_list');
    let BannerWraperListItem = document.querySelectorAll('.banner_wraper_list_item');
    let BannerWraperLeftBtn = document.querySelector('.banner_wraper_left_btn');
    let BannerWraperRightBtn = document.querySelector('.banner_wraper_right_btn');
    let BannerWraperBtnBoxSpan = document.querySelectorAll('.banner_wraper_btn_box span');
    let index = 0;
    // 第二步: 给按钮添加事件
    for (let i = 0; i < BannerWraperBtnBoxSpan.length; i++) {
        BannerWraperBtnBoxSpan[i].onclick = function () {
            index = i;
            move();
        }
    }
    function move() {
        // 先将所有按钮class清空
        for (let j = 0; j < BannerWraperBtnBoxSpan.length; j++) {
            BannerWraperBtnBoxSpan[j].className = "";
        }
        // 在给当前点击的按钮加active
        BannerWraperBtnBoxSpan[index].className = "active";
        // 计算BannerWraperList的left
        BannerWraperList.style.left = - index * 1920 + "px";
    }
    // 第三步: 实现轮播图自动播放
    let timer="";
    timer = setInterval(autoPlay, 3000);
    function autoPlay(){
        index++;
        if(index>= BannerWraperBtnBoxSpan.length){
            index =0;
        }
        move();
    } 
    // 第四步:实现鼠标悬停--停止播放   鼠标离开--自动播放
    Banner.onmouseover= function(){
        clearInterval(timer);
    }
    Banner.onmouseout= function(){
       timer = setInterval(autoPlay, 3000);
    }
    // 第五步: 实现点击左右按钮,滚动轮播图
    BannerWraperRightBtn.onclick = function(){
        autoPlay();
    }
    BannerWraperLeftBtn.onclick = function(){
        index--;
        if(index<0){
            index = BannerWraperBtnBoxSpan.length-1;
        }
        move();
    }
}
相关推荐
xier1234567 分钟前
高性能和高灵活度的react表格组件
前端
曦曜2928 分钟前
富文本编辑器
javascript
你打不到我呢9 分钟前
nestjs入门:上手数据库与prisma
前端
多啦C梦a10 分钟前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森16 分钟前
乐观更新
前端·react.js·设计模式
笔尖的记忆23 分钟前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin88831 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang45339 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼39 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI1 小时前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html