【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();
    }
}
相关推荐
江沉晚呤时20 分钟前
深入解析 .NET Kestrel:高性能 Web 服务器的架构与最佳实践
服务器·前端·.net
264玫瑰资源库1 小时前
网狐旗舰大联盟组件源码私测笔记:结构分层、UI重构与本地实操全流程
java·前端·数据库·笔记·ui·重构
qq_589568101 小时前
Electron学习+打包
前端·javascript·electron
万叶学编程1 小时前
鸿蒙移动应用开发--ArkTS语法进阶实验
开发语言·javascript·ecmascript
小星jeff1 小时前
rails 8 CSS不起效问题解决
前端·css
小满zs2 小时前
React-router v7 第七章(导航)
javascript·react.js·ecmascript
二川bro2 小时前
前端实现商品放大镜效果(Vue3完整实现)
前端
苏小夕夕3 小时前
大数据应用开发和项目实战-Seaborn
大数据·前端
凉生阿新3 小时前
【React】Hooks 解锁外部状态安全订阅 useSyncExternalStore 应用与最佳实践
javascript·安全·react.js
大G哥3 小时前
用 Java 和 DL4J 实现验证码识别系统
java·linux·开发语言·前端·python