【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();
    }
}
相关推荐
Mintopia15 分钟前
计算机图形学的奇幻之旅:第三天探索
前端·javascript·计算机图形学
Mintopia17 分钟前
Three.js 物理材质:打造 3D 世界的 “魔法皮肤”
前端·javascript·three.js
知识分享小能手40 分钟前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习
stark张宇1 小时前
Web - Javascript 函数与DOM、BOM
前端
上海张律师1 小时前
组件截图sdk -- screenshot_hm介绍 ##三方SDK##
前端·harmonyos
lineo_1 小时前
抛弃陈旧写法,你的uniapp定义globalData的正确姿势(setup语法糖)
前端·javascript
spionbo1 小时前
Vue 结合 D3 实现可拖拽拓扑图的技术方案及具体应用实例解析
前端·javascript
GIS之路1 小时前
OpenLayers 图形交互编辑
前端
ViceBoy_1 小时前
前端混淆的概念-缓存&存储
前端·面试
中微子1 小时前
从C++看JavaScript闭包:执行上下文与作用域的跨语言对比
前端·c++