【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();
    }
}
相关推荐
江城开朗的豌豆1 分钟前
Vue的data去哪儿了?生命周期寻宝记
前端·javascript·vue.js
玲小珑15 分钟前
Next.js 教程系列(十三)Server Actions:新一代全栈能力
前端·next.js
toooooop816 分钟前
elementUI vue2 前端表格table数据导出(二)
前端
山河木马34 分钟前
前端学习C++之:创建对象
前端·javascript·c++
汪子熙38 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者39 分钟前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝1 小时前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子1 小时前
Web缓存:原理、策略与优化
前端·面试
小磊哥er1 小时前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条1 小时前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展