用原生js实现轮播图效果，点击切换图片、定时切换-蒲公英云

用原生js实现轮播图效果，点击切换图片、定时切换

r囧r小猫 2023-07-03 10:51 234阅读 0赞

其实轮播图挺简单的，功能实现就是Javascript 不懂的朋友可以私信我哦！
要想效果好，边框阴影加圆角：
1：边框 boder
2：阴影 shadow(box-shadow:盒子阴影 text-shadow:文子阴影)
3：圆角 border-radius
后面也出几篇博客聊聊这三宝

轮播图示例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrap{ 
                width: 533px;
                height: 300px;
                position:relative;
                box-shadow: 5px 5px 5px #cccccc;
            }
            .list{ 
                width: 530px;
                height: 300px;
                list-style: none;
                position:relative;
                padding-left: 0px;
            }
            .item{ 
                width: 100%;
                height: 100%;
                font-size: 50px;
                color: white;
                position:absolute;
                opacity: 0;
                transition: all 0.6s;
            }
            .btn{ 
                width: 50px;
                height: 100px;
                position:absolute;
                top: 100px;
                z-index: 100;
                opacity: 0.7;
            }
            #goPre{ 
                left: 0px;
            }
            #goNext{ 
                right: 0px;
            }
            .item.active{ 
                opacity: 1;
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <ul class="list">
                <li class="item active"><img src="http://placehold.it/533x300?text=1" ></li>
                <li class="item"><img src="http://placehold.it/533x300?text=2" ></li>
                <li class="item"><img src="http://placehold.it/533x300?text=3" ></li>
                <li class="item"><img src="http://placehold.it/533x300?text=4" ></li>
                <li class="item"><img src="http://placehold.it/533x300?text=5" ></li>
            </ul>
            <button type="button" class="btn" id="goPre"><</button>
            <button type="button" class="btn" id="goNext">></button>
        </div>
        <script type="text/javascript">
            //获取到所有的li列表
            var items=document.getElementsByClassName("item");
            //获取左右切换按钮
            var goPreBtn=document.getElementById("goPre");
            var goNextBtn=document.getElementById("goNext");
            //index表示第几张图片在展示-- 第index张图片有active这个类名
            var index=0;
            var clearActive=function(){ 
                for(var i=0;i<items.length;i++){ jiehuan
                    items[i].className='item';
                }
            };ji
             function goIndex(){ 
                clearActive();
                items[index].className='item active';
            };
             function goNext(){ 
                if(index<4){ 
                    index ++;
                }else{ 
                    index=0;
                };
                goIndex();
            };
             function goPre(){ 
                if (index == 0){ 
                    index=4;
                }else{ 
                    index --;
                }
                goIndex();
            };
            //左键按钮 调用goPre函数 切换到上一张
            goPreBtn.addEventListener('click',function(){ 
                goPre();
            });
            //右键按钮 调用goNext函数 切换到下一张
            goNextBtn.addEventListener('click',function(){ 
                goNext();
            });
            //定时调用函数 每隔两秒调用goNext函数
            var timer;
            timer=setInterval(function(){ 
                goNext();
            },2000)//2000毫秒=1秒
        </script>
    </body>
</html>