js实现轮播图

最新推荐文章于 2024-06-17 15:29:34 发布

小小白号

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量127

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/WiseGirls/article/details/111184182

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js制作轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            position: relative;
            width: 640px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        #tu_ul{
            position: absolute;
            width: 3200px;
            list-style: none;
        }
        #tu_ul::after{
            content: "";
            display: block;
            clear: both;
        }
        #tu_ul li{
            float: left;
        }
        #tu_ul img{
            width: 640px;
            vertical-align: middle;
        }
        #b_left,#b_right{
            position: absolute;
            top: 50%;
            width: 40px;
            height: 50px;
            margin-top: -20px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            color: rgb(233, 97, 18);
            font-size: 30px;
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.5);
        }
        #b_left{
            left: 0;
        }
        #b_right{
            right: 0;
        }
        #btn{
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -55px;
            width: 110px;
            height: 20px;
        }
        #btn span{
            display: inline-block;
            cursor: pointer;
            width: 15px;
            height: 15px;
            margin: 0px 4px;
            background-color: #fff;
        }
        #btn .span_bg{
            background-color: rgb(241, 122, 10);
        }
    </style>
</head>
<body>
    <div id="box">
        <ul id="tu_ul">
            <li><img src="timg1.jpg" alt=""></li>
            <li><img src="timg2.jpg" alt=""></li>
            <li><img src="timg3.jpg" alt=""></li>
            <li><img src="timg4.jpg" alt=""></li>
            <li><img src="timg1.jpg" alt=""></li>
        </ul>
        <p id="b_left">&lt;</p>
        <p id="b_right">&gt;</p>
        <div id="btn">
            <span data-index="0" class="span_bg"></span>
            <span data-index="1"></span>
            <span data-index="2"></span>
            <span data-index="3"></span>
        </div>
    </div>
</body>
<script src="animate.js"></script>
<script>
    //获取左边的箭头
    var b_left=document.getElementById("b_left");  
    //获取右边的箭头
    var b_right=document.getElementById("b_right");  
    //获取ul
    var ul=document.getElementById("tu_ul");   
    //获取最外层的盒子
    var box=document.getElementById("box"); 
    //设置index变量，存储显示的是第几张图片
    var index=0; 
    //设置储存变色按钮位置
    var circle=0;
    /* 
     * 设置flag变量（节流阀）
     * 当它为true时，点击按钮更换图片
     * 当它为false时，点击左右箭头无效，只有当动画执行完毕后，才能再次更换图片
     */
    var flag=true;
    //点击左侧箭头
    b_left.addEventListener("click",function(){
        //判断flag
        if(flag){
            flag=false;
            /* 
             * 当index为4时（到达最后一张图片时，index的值），则需要回到最开始的位置，来达到无缝轮播的效果
             * 设置ul的left的值为0，同时初始化index的值
             * 因为ul中的最后一张图片和第一张图片为同一张图片，视觉上的最后一张图片到第一张（实际上的最后一张）图片的动画是没有瑕疵的
             * 而初始化后的index也马上在下面进行了++的操作，所以就会马上开始执行从第一张图片到第二张图片的动画，单单从视觉上来看就能达到无缝衔接
             */
            if(index==4){
                ul.style.left=0;
                index=0;
            }
            //点击箭头，代表要更换图片，所以index要跟随着一起变化
            index++;
            circle++;
            //等circle为4的时候，因为没有下标为4的按钮，而且下次就是要回到第一张图片，所以要让
            if(circle==4){
                circle=0;
            }
            //计算ul移动的距离（第index张图片的位置距离）
            var left=-box.offsetWidth*index;
            //重置所有指示器样式
            clearStyle();
            //调用animate函数，实现更换图片时的动画效果
            animate(ul,left);
        }
    });
    //点击右侧箭头（步骤和左侧箭头大致相同）
    b_right.addEventListener("click",function(){
        if(flag){
            flag=false;
            if(index==0){
                //让ul显示实际上的最后一张图片
                ul.style.left=-box.offsetWidth*4+"px";
                index=4;
            }
            index--;
            circle--;
            if(circle==-1){
                circle=3;
            }
            var right=-box.offsetWidth*index;
            animate(ul,right);
            clearStyle();
        }
    });

    //获取所有的span（按钮）标签
    var btns=document.querySelectorAll("#btn span");
    for(let i=0;i<btns.length;i++){
        btns[i].addEventListener("click",function(){
            if(flag){
                flag=false;
                //获取点击的是哪一个按钮
                var btn_index=this.dataset.index;
                circle=btn_index;
                index=btn_index;
                //清除所有按钮的样式
                clearStyle();
                //给点击的按钮添加样式
                this.className="span_bg";
                //计算相应图片的位置
                var btn_left=-box.offsetWidth*btn_index;
                //移动ul的位置
                animate(ul,btn_left);
            }
        });
    };
    function clearStyle(){
        //清除所有按钮的橙色背景的样式
        for(var i=0;i<btns.length;i++){
            btns[i].className="";
        }
        //给点击的按钮添加橙色背景样式
        btns[circle].className="span_bg";
    }
</script>
</html>

小小白号

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图

js制作轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
复制链接

扫一扫