简单HTML、CSS、JS实现的banner横幅轮播效果

女爷i 2022-01-22 23:21 519阅读 0赞

直接上代码吧

# index.html #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>哦喔</title>
    
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    
    <link rel="stylesheet" href="css/style.css">
    <script>
    $(document).ready(function function_name() {
                    imageAutoChange()
                })
    </script>
    <style type="text/css">
    	html,body{
    		height: 100%;
    	}
    	body{
    		margin: 0;
    	}
    </style>
    </head>
    
    <body >
        <div id="main_div">
        	
            <ul id="main_div_img" >
           		
                <li><img src="images/g1.jpg" width="100%" height="600" /></li>
                <li><img src="images/g2.jpg" width="100%" height="600" /></li>
                <li><img src="images/g3.jpg" width="100%" height="600" /></li>
                <li><img src="images/g4.jpg" width="100%" height="600" /></li>
                <li><img src="images/g5.jpg" width="100%" height="600" /></li>
                <li><img src="images/g6.jpg" width="100%" height="600" /></li>
            </ul>
    
            <ul id="main_div_num">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
            
    </body>
    </html>

# index.js #

# style.css #

#main_div{  
        width:100%;  
        height:600px;  
        position:absolute;  
    }  
    /*取消小圆点*/  
    #main_div li{  
        list-style:none;  
    }  
    #main_div_img {  
    	margin:0; 
    	padding: 0px;
    }  
    
    #main_div_img li{  
        display:none; 
    	margin:0; 
    	padding: 0px;
    }  
    
    /*角落显示数字的ul*/  
    #main_div_num{  
        overflow:hidden;  
        position:absolute;  
        bottom:10px;  
        right:10px;  
        color:#FFF;  
    }  
    /*数字的浮动*/  
    #main_div_num li{  
        border:#FFF solid 1px;  
        float:left;  
        margin:0px 5px;  
        padding:3px 10px;  
    }  
    .numsover{  
        background-color:#F08080;  
        color:#F00;  
    }  
    
    .numsout{}

# 执行效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L292ZWp1cg_size_16_color_FFFFFF_t_70]: /images/20220123/ebb784d8fdb641c09e59faecdb589410.png