banner图/轮播图----html

最新推荐文章于 2024-04-21 09:42:58 发布

1900_

最新推荐文章于 2024-04-21 09:42:58 发布

阅读量6.6k

点赞数 1

分类专栏： # html

本文为博主原创文章，如需转载请联系博主授权。如果对博客文章有建议，可以联系邮箱zpf1900@foxmail.com

本文链接：https://blog.csdn.net/holly_Z_P_F/article/details/93483244

版权

html 专栏收录该内容

16 篇文章 4 订阅

订阅专栏

四张图片轮播

效果如下

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner</title>
    <style type="text/css">
        #banner{
            width: 1000px;/*图片大小*/
            height: 285px;
            margin: 50px auto;
            position: relative;
        }
        #banner ul{
            position: absolute;
            left: 480px;
            top: 210px;
        }
        #banner li{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            list-style: none;
            float: left;
            margin: 0px 10px;
        }
        /*鼠标移出样式*/
        .b_li_out{
            border: 1px solid orange;
            color: orange;
            background: #fff;
        }
        /*鼠标移入样式*/
        .b_li_over{
            border: none;
            color: #fff;
            background: orange;
        }
    </style>
</head>
<body>
<div id="banner">
    <img id="img" src="img/01.jpg">
    <ul>
        <li class="b_li_out">1</li>
        <li class="b_li_out">2</li>
        <li class="b_li_out">3</li>
        <li class="b_li_out">4</li>
    </ul>
</div>
<script type="text/javascript">
    var urls=new Array("img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg");
    var lis=document.getElementById("banner").getElementsByTagName("li");
    var Img=document.getElementById("img");
    var len=lis.length;
    for(var i=0;i<len;i++){
        /*鼠标移入事件*/
        lis[i].onmouseover=function (){
            for(var j=0;j<len;j++){
                if(this==lis[j]){
                    lis[j].className="b_li_over";
                    Img.src=urls[j];
                }
            }
        }
        /*鼠标移出事件*/
        lis[i].onmouseout=function () {
            for(var j=0;j<len;j++){
                if(this==lis[j]){
                    lis[j].className="b_li_out";
                }
            }
        }
    }
</script>
</body>
</html>