js+css制作简单的轮播图带有定时功能

用纯css和JavaScript代码制作带有定时轮播功能的轮播图

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                width: 360px;
                border: 1px black solid;
                margin: 0 auto;
                border-radius: 8px;
                /* 父容器加相对定位 */
                position: relative;
            }
            img{
                border-radius: 8px;
            }
            li{
                float: left;
                list-style: none;
                width: 26px;
                height: 26px;
                border: 1px black solid;
                /* 左右居中 */
                text-align: center;
                /* 行高为li的高度，这样文字就可以垂直居中了 */
                line-height: 26px;
                
                margin-left: 15px;
                background-color: #FFFFFF;
                /* 变成手的光标 */
                cursor: pointer;
            }
            ul{
                /* 在父容器进行绝对定位 */
                position: absolute;
                top: 140px;
                left: 30px;
            }
        </style>
        
    </head>
    <body>
        
        <div>
            <img src="images/1.gif" >
            
            <ul>
                <li onclick="clicks(0)">1</li>
                <li onclick="clicks(1)">2</li>
                <li onclick="clicks(2)">3</li>
                <li onclick="clicks(3)">4</li>
                <li onclick="clicks(4)">5</li>
            </ul>                        
        </div>        
        <script type="text/javascript">
           // 图片名称
            var imgs=["1.gif","2.gif","3.jpg","4.jpg","5.gif"]            
            // 更换图片
            function clicks(n){    
                //设置图片src的值
                 document.getElementsByTagName("img")[0].setAttribute("src","images/"+imgs[n])
            }
            //刚开始默认值为0，即数组下标为0元素
            var i=0;
            function js(){                
                // if (i<4) {
                //     i++;
                // } else{
                //     i=0;
                // }    
                // alert(i)    
                i= i<4 ? i+=1 : i=0;//三元运算符，当下标小于4的时每次加一，否则重新回到0                
                clicks(i);            //调用函数
            }
            
             setInterval("js()",3000)//每三秒执行一次js()函数
 </script> </body> </html>
复制代码

 

posted @   三线码工  阅读(362)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示