banner图/轮播图----html

 

四张图片 轮播

效果如下

 

代码:

<!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>

 

 

©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值