【HTML5】显示-隐藏法 实现网页轮播图效果

【HTML5】显示-隐藏法 实现网页轮播图效果

实现思路:先将所有图片在页面中设置好,然后给放置图片的元素li添加display:none属性将其隐藏,然后通过js获取到放置图片的元素li,再一个一个的给li元素添加display:block属性将其显示出来,从而达到轮播图的效果。

1.页面布局

(1)页面中主要使用相对定位和绝对定位将左右按钮和滚动标签按钮设置到图片上,相关代码如下:
复制代码
<--页面设置-->
<div class="div1">
        <div class="container">
            <div class="content">
                <div class="ads">
                    <ul class="ads-list">
                        <li class="show"><a href="###"><img src="./images/ad1.avis" /></a></li>
                        <li><a href="###"><img src="./images/ad2.avis" /></a></li>
                        <li><a href="###"><img src="./images/ad3.avis" /></a></li>
                    </ul>
                    <div class="ads-btn">
                        <span class="active">1</span>
                        <span>2</span>
                        <span>3</span>
                    </div>
                    <!--&lt;小于 &gt;大于  &nbsp;空格 -->
                    <a href="javascript:;" class="btn-left btn">&lt;</a>
                    <a href="javascript:;" class="btn-right btn">&gt;</a>
                </div>
            </div>
        </div>
    </div>
(2)对应的css样式如下:
复制代码
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.div1{
    background-color: aliceblue;
}
a {
    /* 设置字体颜色 */
    color: #172c45;
    /* 取消a标签的下划线 */
    text-decoration: none
}

li {
    /* 取消li前面的图标 */
    list-style: none
}

/* 公共样式 */
.container {
    width: 1100px;
    /* 盒子模型 */
    margin: 0 auto;
    height: 100%;
    border: 1px solid red;
}
content {
    border: 1px solid yellow;
    display: flex;
    justify-content: space-between;
}

.ads {
    /* 父容器设置为弹性盒子之后,可以使用该属性设置弹性项目所占比例 */
    flex: 1;
    border: 2px solid fuchsia;
    position: relative;
}

/* 3.轮播图和切换按钮 */
 .ads-list {
    width: 100%;
    height: 100%;
}

.ads-list li img {
    /* 图片将会扩展来填满其父元素的宽度 */
    width: 100%;
}

/* 轮播图隐藏和显示 */
.ads-list li {
    display: none;
}

.ads-list .show {
    display: block;
}

/* 页码标签 */
.ads-btn {
    width: 100px;
    height: 10px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -50px;
    display: flex;
    justify-content: space-between;
}

.ads-btn span {
    background-color: #007d4f;
    /* 文本首行缩进 */
    text-indent: -99999px;
    border-radius: 4px;
    width: 30px;
}

.ads-btn .active {
    background-color: white;
}

/* 换页按钮 */
.btn {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    font-size: 30px;
    border-radius: 50%;
    background-color: #007d4f;
    color: white;
    text-align: center;
    line-height: 30px;
}

.btn-left {
    left: 10px;
}

.btn-right {
    right: 10px;
}
(3)js代码如下:
复制代码
window.addEventListener("load", function () {
    ads();
});
function ads(){
    console.log("这是⼴告轮播图交互");
    // 第⼀步:获取元素
    let oAd = document.querySelector(".container .ads");
    let aLi = document.querySelectorAll('.content .ads-list li');
    let aBtn = document.querySelectorAll('.content .ads-btn span');
    let oBtn_left = document.querySelector('.content .ads .btn-left');
    let oBtn_right = document.querySelector('.content .ads .btn-right');
    let index = 0; // 初始索引,从第⼀张图⽚开始轮播
    let timer = null;
     // 第二步:初始化,默认第一张图片显示 第一个按钮为焦点状态
    aLi[index].classList.add("show");
    aBtn[index].classList.add("active");
     // 第三步: 给按钮添加点击事件
     for (let i = 0; i < aBtn.length; i++) {
        aBtn[i].onclick = function () {
            index = i;
            play();
        }
    }
    function play() {
        //先将所有按钮移除点击时的样式
        for (let j = 0; j < aBtn.length; j++) {
            aBtn[j].classList.remove("active");
            aLi[j].classList.remove("show");
        }
        // 再将点击的按钮设置激活样式
        aBtn[index].classList.add("active");
        aLi[index].classList.add("show");
    }

     // 第四步: 自动播放
     function autoplay() {
        index++;
        if (index >= aBtn.length) {
            index = 0;
        }
        play();
    }
    timer = setInterval(autoplay, 3000);

     //  悬停/离开  停止/播放
     oAd.onmouseover = function(){
        clearInterval(timer);
       }
       oAd.onmouseout = function(){
        timer = setInterval(autoplay, 3000);
       }
       
       oBtn_left.onclick = function(){
            index--;
            if(index<0){
                index = aBtn.length-1;
            }
            play();
       }

       oBtn_right.onclick = function(){
          autoplay();
       }
}
(4)运行效果
相关推荐
GISer_Jing6 分钟前
前端面试常考题目详解
前端·javascript
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart