网页轮播图 JavaScript

最新推荐文章于 2024-01-12 14:48:52 发布

枯叶逢春

最新推荐文章于 2024-01-12 14:48:52 发布

阅读量367

点赞数 2

分类专栏：网页文章标签： javascript html css

本文链接：https://blog.csdn.net/DOT_liu/article/details/105926823

版权

网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录结构：
在这里插入图片描述
图片说明：
banner1.jpg、banner2.jpg、banner3.jpg宽度：width：2000px,高度：height:470px，banner_left.png、banner_right.png宽度：width：80px,高度：height:84px

代码部分：
1、index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel figure</title>
    <link rel="stylesheet" href="../../lunbo_liu/images/public.css">
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="banner">
    <ul class="bannerUl" id="bannerUl">
        <li style="background: url('../images/banner1.jpg') top center no-repeat"><a href="#"></a></li>
        <li style="background: url('../images/banner2.jpg') top center no-repeat"><a href="#"></a></li>
        <li style="background: url('../images/banner3.jpg') top center no-repeat"><a href="#"></a></li>
    </ul>
    <!-- 左右箭头控制 -->
    <a id="btnLeft" class="bannerBtn bannerLeft" href="javascript:void(0)"><img src="../images/banner_left.png" alt=""></a>
    <a id="btnRight" class="bannerBtn bannerRight" href="javascript:void(0)"><img src="../images/banner_right.png" alt=""></a>
    <!-- 左右箭头控制 end -->

    <!-- 底部圆点控制块 -->
    <div class="controls" id="controls"></div>
    <!-- 底部圆点控制块 end -->
</div>
<script src="../js/index.js"></script>
</body>
</html>

2、index.css


/*pubic.css*/
*{
    margin: 0 auto;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
img{
    border:none;
}
.clears{
    clear: both;
    height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
}
body{
    font-family: Arial,Verdana,"Microsoft Yahei","Pingfang SC","Simsun";
    font-size: 14px;
}
.section{
    width: 1200px;
}
/*public.css end*/

.banner{
    width: 100%;
    min-width: 1200px;
    height: 470px;
    position: relative;
}
.bannerUl,
.bannerUl>li,
.bannerUl>li>a {
    width: 100%;
    height: 470px;
}
.bannerUl>li>a{
    display: block; /*转为块元素*/
}
.bannerUl>li{
    position: absolute;
    display: none;
}
.bannerUl>.show{
    display: block;
}
.bannerBtn{
    width: 80px;
    height: 84px;
    position: absolute;
    top:50%;
    margin-top: -42px;
    opacity: 0;
    transition: all 0.2s ;
}
.banner:hover .bannerBtn{
    opacity: 0.3;
}
.banner .bannerBtn:hover{
    opacity: 0.8;
}
.bannerLeft{
    left: 0;
}
.bannerRight{
    right: 0;
}
.controls{
    bottom:30px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.controls>span{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #fff;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 20px;
    cursor: pointer;
    opacity: 0.5;
}
.controls>.on{
    opacity: 1;
    background: #f30;
    width: 40px;
}

3、index.js

{
    let bannerUl = document.getElementById("bannerUl");
    let btnLeft = document.getElementById("btnLeft");;
    let btnRight = document.getElementById("btnRight");
    let controls = document.getElementById("controls");
    let lis = bannerUl.children; //找到所有图片；
    let index = 0; //定义图片的索引

    //各类函数定义

    /*找兄弟节点*/
    let findSiblings = function( tag ){
        let child = tag.parentNode.children; // 找到当前节点对应的父节点的所有子标签，包括当前标签
        let siblings = [];  //存放兄弟节点

        for(let i =0 ; i<= child.length-1 ; i++){
            if(child[i]===tag){ //判断当前父节点的子节点是否和当前节点一致，一致终止此次循环，跳到下一次循环
                continue;
            }
            siblings.push(child[i]); // 把兄弟节点给存储到数组中
        }
        return siblings;
    };
    /*找兄弟节点 end*/

    /*去掉兄弟标签的指定类*/
    let removeSiblingClass = function( tag , classNa){
        let siblings = findSiblings(tag);
        for(let i=0;i<=siblings.length -1 ;i++){
            siblings[i].classList.remove(classNa);
        }
    };
    /*去掉兄弟标签的指定类 end*/

    /*添加点击样式*/
    let showPic = function( index ){
        lis[index].classList.add("show");
        removeSiblingClass( lis[index] , "show");

        dots[ index].classList.add("on");
        removeSiblingClass( dots[index] , "on");
    };
    /*添加点击样式end*/

    /*动态生成底部小圆点*/
    for(let i = 0 ; i <= lis.length - 1; i++){
        let span = document.createElement("span");
        controls.appendChild(span);
    }
    /*动态生成底部小圆点 end*/

    /*定义left函数，并实现图片切换*/
    let left = function(event){
        index--;
        if(index < 0){
            index = lis.length-1;
        }
        showPic( index );
    };
    /*定义left函数，并实现图片切换 end*/

    /*定义right函数，并实现图片切换*/
    let right = function(event){
        index++;
        if(index > lis.length - 1){
            index = 0;
        }
        showPic( index );
    };
    /*定义right函数，并实现图片切换 end*/

    //对应函数的调用
    btnLeft.addEventListener("click",left); //为左边箭头添加点击事件left
    btnRight.addEventListener("click",right); //为右边箭头添加点击事件right

    let dots = controls.children; //寻找所有的点
    showPic( index); //由于全局变量的index的值为0，因此，此处即为设置了默认图片和对应圆点的样式
    /*为小圆点添加点击事件，实现点击切换图片功能*/
    for(let i = 0 ; i <= dots.length-1 ; i++){
        dots[i].addEventListener("click",function () {
            index = i ;
            showPic( index );
        })
    }
    /*为小圆点添加点击事件，实现点击切换图片功能 end*/
}

枯叶逢春

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页轮播图 JavaScript

目录结构：图片说明：banner1.jpg、banner2.jpg、banner3.jpg宽度：width：2000px,高度：height:470px，banner_left.png、banner_right.png宽度：width：80px,高度：height:84px代码部分：1、index.html:<!DOCTYPE html><html lang="en...
复制链接

扫一扫