JavaScript原生轮播图

最新推荐文章于 2024-07-31 16:33:32 发布

黎明不管黑夜的星空

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量143

点赞数

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

本文链接：https://blog.csdn.net/weixin_50930483/article/details/125901962

版权

Javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、无动画效果


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style:none;
        }
        /* 去掉图片底部缝隙 */
        img{
            vertical-align: bottom;
        }
        .w{
            width: 1200px;
            margin:0 auto;
        }
        .banner{
            height: 400px;
            position: relative;
            overflow:hidden;
            margin-top: 50px;
        }
        .banner .arrow_left{
            width: 36px;
            height: 44px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            z-index:1;
            cursor: pointer;
        }
        .banner .arrow_right{
            width: 36px;
            height: 44px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -22px;

            z-index:1;
            cursor: pointer;
        }

        /* 为什么要给ul设置600%的宽度,因为我们需要把所有的li浮动成一行,ul必须有足够的宽度才可以放得下 */
        .banner ul {
            width: 7200px;
            /* 如果想要让ul可以移动,需要给ul设置绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
        }
        .banner ul li{
            float: left;
            width: 1200px;
        }

        .banner .circle{
            position: absolute;
            bottom: 20px;
            /* left: 50%; */
            width: 120px;
            /* margin-left: -60px; */
        }
        .banner .circle li{
            width: 10px;
            height: 10px;
            background:rgba(255,255,255,0.8);
            border-radius: 50%;
            float: left;
            margin-right: 10px;
            /* 鼠标模拟手势 */
            cursor: pointer;
        }
        /* 为了后面可以点击li高亮 */
        /* .banner .circle li:first-child{
            width: 20px;
            border-radius: 10px;
        } */
        /* 我们单独定义一个类名 .current  */
        .banner .circle .current{
            width: 20px;
            border-radius: 10px;
            background-color: red;
        }
        .banner .circle li:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="banner w">
        <!-- 左右按钮 -->
        <img src="images/prev.png" class="arrow_left"/>
        <img src="images/next.png" class="arrow_right"/>
        <!-- 图片 -->
        <ul>
            <li><a href="#"><img src="images/banner01.jpg"></a></li>
            <li><a href="#"><img src="images/banner02.jpg"></a></li>
            <li><a href="#"><img src="images/banner03.jpg"></a></li>
            <li><a href="#"><img src="images/banner04.jpg"></a></li>
            <li><a href="#"><img src="images/banner05.jpg"></a></li>
            <li><a href="#"><img src="images/banner06.jpg"></a></li>
        </ul>
        
        <!-- 导航点 -->
        <ol class="circle">

        </ol>
    </div>

    <script>
            // 轮播图：
                // 1.0 点击左右按钮切换图片
                // 2.0 点击导航点切换图片
                // 3.0 图片自动切换
                // 4.0 导航点跟随图片切换
                // 5.0 切换的无缝衔接


            // 要求：
                //轮播图做出点击左右按钮切换

            // 思考：
                // 控制哪些元素
                // 如何切换图片

            // 编码：
                // 1.0 获取相关的元素
                var arrow_left = document.querySelector(".arrow_left");
                var arrow_right = document.querySelector(".arrow_right");
                var picItems = document.querySelectorAll(".banner ul li");
                var picElement = document.querySelector(".banner ul");
           
                // console.log(picItems);

                // 2.0 定义变量 记录索引值（下标）
                var index = 0;// 主心骨
                var width = 1200;// 宽度


                // 3.0 利用css的position的absolute,结合left属性完成图片切换
                // margin-left:px;
                // transform:translate(px)

                //右边按钮
                arrow_right.onclick = function(){
                    // 自增
                    index ++;
                    // 判断是否超出最大索引值
                    if(index > picItems.length - 1){
                        // 重置索引值
                        index = 0;
                    }
                    // console.log("index:",index);
                    // 切换图片
                    changeImage( index , width);
                }
                //左边按钮
                arrow_left.onclick = function(){
                    // 自减
                    index  --;
                    // 判断是否小于最小索引值
                    if(index < 0){
                          // 重置索引值
                          index = picItems.length - 1;
                    }
                    // console.log("index:",index);
                    // 切换图片
                    changeImage(index , width);
                }


                // 编写导航点的逻辑
                var pointStr = "";
                for(var i = 0 ; i < picItems.length ; i ++){
                    if(i == 0 ){
                        pointStr += "<li class='current' data-index='"+i+"'></li>"
                    }else {
                        pointStr += "<li  data-index='"+i+"'></li>"
                    }
                }

                // 获取导航点容器标签
                document.querySelector(".circle").innerHTML = pointStr;
                // 获取导航点标签
                var points = document.querySelectorAll(".circle li");
                // console.log(points);

                // 循环导航点
                for(var j = 0 ; j < points.length ; j ++){
                    // 给每个导航点添加自定义属性
                    points[j].onclick = function(){
                        // 获取当前点击的导航点自定义属性值
                        index = this.dataset.index;
                        // 切换图片和导航点
                        changeImage( index , width );
                    }
                }



                // 编写函数 ，切换图片的逻辑
                function changeImage( key , width ){
                    // 改变ul标签的水平位置
                    picElement.style['left'] = -(key * width) +"px";
                    // 排他思想
                    for(var i = 0 ; i < points.length ; i ++ ){
                        // 移除类名
                        points[i].className = "";
                    }
                    // 切换导航点
                    points[key].className = "current";
                }
                

              

           
    </script>
</body>
</html>

2、有动画效果

HTML、JavaScript


<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="swiper-wrapper">
        <!-- 轮播图容器 -->
        <div class="wrapper-container">
            <!-- 图片-->
            <div class="banner">
                <ul>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <!-- 追加一张图片 -->
                    <li>
                        <a href="#">1</a>
                    </li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="point">
                <ol>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 按钮 -->
            <div class="btn-left"><span class="icon"></span></div>
            <div class="btn-right"><span class="icon"></span></div>
        </div>
    </div>


    <script src="./js/animateV3.0.0.js"></script>
    <script>
        // 要求:    
        // 功能: 无缝衔接轮播图
            // 1.0 实现图片的自动轮播图
            // 2.0 鼠标移入轮播图区域,停止轮播,鼠标离开轮播图区域,继续轮播
            // 3.0 导航点跟随轮播图进行切换
            // 4.0 点击导航点切换图片
            // 5.0 点击左右按钮,实现图片的切换和导航点跟随切换

        // 思考:
            // 需要控制哪些标签
            // 控制其什么属性

        // 编码:
            // 1.0 获取页面相关的元素 wrapper-containe
            var container = document.querySelector(".wrapper-container");
            var banner = document.querySelector(".banner");
            var ulElement = document.querySelector(".banner ul");
            var points = document.querySelectorAll(".point ol li");
            var btnLeft = document.querySelector(".btn-left");
            var btnRight = document.querySelector(".btn-right");
            // console.log(btnLeft);
            // 2.0 声明变量
            // 记录索引值  
            var index = 0;// 图片的索引值
            var square = 0;// 导航点的索引值
            // 记录宽度
            var width = banner.offsetWidth;
            // 定时器变量
            var dingshiqi  = null;

            // 3.0 编写函数 
            // 切换导航点
            var setPoint = function(key){
                // 排他思想
                for(var i = 0 ; i < points.length ; i ++){
                    points[i].className = "";
                }
                // 索引值对应的导航点高亮
                points[key].className = "active";
            }
            // 测试
            // setPoint(0);
            // 改变索引值 (图片和导航点的索引值) 
            // changeIndex === > autoPlay
            var autoPlay = function(){
                // 设置index自增
                index ++;
                // 判断index是否大于
                if(index > 3){
                    index = 1;
                    // 设置ul标签瞬间位移到0位置
                    ulElement.style["marginLeft"] = "0px";
                }
                // 动画执行形式切换图片 animate(dom,prop,value)
                animate(ulElement, "marginLeft", -(index * width));

                // 处理导航点的索引值
                square ++;
                // 三元运算
                square = square > 2 ? 0 : square;
                // 调用setPoint函数
                setPoint(square);
            }
            // 测试
            // autoPlay();

            // 4.0 实现轮播图自动播放
            dingshiqi = setInterval(function(){  autoPlay(); },2000)

            // 5.0 鼠标移入轮播图 暂停轮播图
            container.addEventListener("mouseenter",function(){
                    // 暂停播放
                    clearInterval(dingshiqi);
                    // 立即停止动画
                    // clearInterval(ulElement.timer);
            })
            // 5.0 鼠标离开轮播图 暂停轮播图继续执行轮播
            container.addEventListener("mouseleave",function(){
                    // 暂停播放
                    clearInterval(dingshiqi);
                    // 继续执行轮播
                    dingshiqi = setInterval(function(){  autoPlay(); },2000)
            })

            // 6.0 点击导航点实现图片切换
            for(var j = 0 ; j < points.length ; j ++){
                // 绑定属性
                points[j].aaa = j;
                // 绑定事件
                points[j].onclick = function(){
                    // 记录当前点击的导航点的索引值 
                    index = this.aaa ;
                    square = this.aaa ;
                    // 动画执行形式切换图片 animate(dom,prop,value)
                    animate(ulElement, "marginLeft", -(index * width));
                    // 设置导航点
                    setPoint(square);
                }
            }
            
            // 7.0 点击左右按钮
            // 左边按钮
            btnLeft.onclick = function(){
                // 防止用户频繁点击按钮
                if(dingshiqi) {
                    clearInterval(dingshiqi);
                }
                // 设置索引值自减
                index --;
                // 判断索引值是否小于0 
                if(index < 0){
                    // 索引值赋值为 2
                    index = 2;
                    // 设置ul标签瞬间位移到最后一张图的位置
                    ulElement.style["marginLeft"] = "-1350px";
                }
                // 其余图片以动画形式轮播
                animate(ulElement,"marginLeft",-(index * width));
                // 设置导航点的索引值
                square -- ;
                // 三元运算
                square = square < 0 ? 2 : square;
                // 切换导航点背景
                setPoint(square);
            }

            // 右边按钮
            btnRight.onclick = function(){
                // 防止用户频繁点击按钮
                if(dingshiqi){
                    clearInterval(dingshiqi);
                }
                // 索引值自增一
                index ++;
                // 判断索引值是否大于 3
                if(index > 3){
                    // 给index赋值为1，目的就是为了让第二张图片以动画形式切入
                    index = 1;
                    // 把容器标签ul瞬间设置为0的为
                    ulElement.style["marginLeft"] = "0px";
                }
                // 以动画形式切换图片
                animate(ulElement,"marginLeft",-(index * width));
                // 导航点的索引值
                square ++;
                // 判断
                square = square > 2 ? 0 : square;
                // 设置导航点切换
                setPoint(square);
            }
    </script>
</body>
</html>

CSS

body {
    margin: 0;
}
ul , ol {
    padding: 0;
    margin: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
.swiper-wrapper {
    font-size: 20px;ac
}

.wrapper-container {
    width: 450px;
    height: 200px;
    background-color: #ccc;
    border: 10px solid #000; 
    /* margin: 100px auto 0; */
    position: relative;
}
.banner {
    width: 450px;
    height: 200px;
    overflow: hidden;
}
.banner ul {
    width: 1800px;
    height: 200px;
    margin-left: 0px;
}
.banner ul li {
    width: 450px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-size: 40px;
    font-weight: bold;
    float: left;
}
.banner ul li  a {
    width: 450px;
    height: 200px;
    display: block;
}
.banner ul li a img {
    width: 450px;
    height: 200px;
    vertical-align: middle;
}

/* 用背景色代替图片 */
.banner ul li:nth-child(1) {
    background-color: darkred;
}
.banner ul li:nth-child(2) {
    background-color: lightgreen;
}
.banner ul li:nth-child(3) {
    background-color: deepskyblue;
}
.banner ul li:nth-child(4) {
    background-color: darkred;
}

/* 导航点 */
.point {
    width: 100%;
    height: 20px;
    /* background-color: pink; */
    position: absolute;
    bottom: 0;
    left: 0;
}
.point ol {
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.point ol li {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
}
.point ol li.active {
    background-color: red;
}

/* 左右按钮 */
.btn-left , .btn-right {
    width: 30px;
    height: 50px;
    background-color: rgba(255,255,255,.1);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    text-align: center;
    line-height: 50px;
}
.btn-left:hover , .btn-right:hover {
    background-color: rgba(255,255,255,.5);
}
.btn-left {
    left: 10px;
}
.btn-right {
    right: 10px;
}

.btn-left .icon ,.btn-right .icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
}
.btn-left .icon {
    background-image: url(../icon/left.png);
}
.btn-right .icon {
    background-image: url(../icon/right.png);
}

animate动画函数（单独放一个js文件）：

function animate(dom,prop,value,callback){
    // 清除定时器 (防抖思想)
    clearInterval(dom.timer);
    // 执行定时器
    dom.timer = setInterval(function(){
        // 记录目标属性值
        var target = parseInt(value);
        // 获取当前的属性值
        var cur = parseInt(getComputedStyle(dom)[prop]);
        // 记录步长
        // var speed = 10;
        var speed = (target - cur) / 10;
        // 步长在运算过程中,产生小数点 当步长为0.3时 需要取值为1 (向上取整); 当步长为-0.4 ,需要为-1(向下取整)
        // 让步长接近等于 1 或者 等于-1 
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        // 判断当前属性值是否达到目标位置 
        if(cur == target){
            // console.log("当前属性值: "+cur);
            clearInterval(dom.timer);
            // 是否符合条件
            if(typeof callback == "function"){
                // 调用回调函数
                callback();
            }
            return ;
        }
        // 设置dom的样式
        dom.style[prop] = cur + speed +"px";
    },30)
}

PS：动画版的轮播图没有使用图片，自行把颜色去掉，加个img标签引入图片即可。不懂就看无动画效果的那个结构。