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 @ 2020-04-29 11:29  三线码工  阅读(354)  评论(0)  编辑  收藏  举报