原生JS制作二级菜单+轮播图效果

效果图:
在这里插入图片描述 d代码如下:

 <style>
        *{
    
    
            margin:0;
            padding:0;
        }
        #box{
    
    
            width: 1200px;
            height: 460px;
            margin: 0 auto;
            position: relative;
        }
        .img{
    
    
            width: 1200px;
            height: 460px;
            position: absolute;
            top:0;
            left:0;
        }
        .img:nth-of-type(1){
    
    
            background: url("./img/bg1.jpg");
        }
        .img:nth-of-type(2){
    
    
            background: url("./img/bg2.jpg");
            display: none;
        }
        .img:nth-of-type(3){
    
    
            background: url("./img/bg3.jpg");
            display: none;
        }
        .jiantou1{
    
    
            left: 242px;
        }
        .jiantou2{
    
    
            right: 20px;
        }
        #box .cc{
    
    
            width: 50px;
            height: 200px;
            line-height: 200px;
            position: absolute;
            top:130px;
            background: rgba(0,0,0,0.3);
            font-size: 50px;
            text-align: center;
            font-weight: bold;
            color:#fff;
        }
        .div-dian{
    
    
            width: 156px;
            height: 32px;
            position: absolute;
            right:10px;
            bottom: 10px;
        }
        .div-dian span{
    
    
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 1px solid #000000;
            border-radius: 50%;
            background: #fff;/*默认颜色*/
        }
        .div-dian .span-first{
    
    
            background: springgreen;
        }
        /*----------------以上是轮播图---------------*/
        .fl{
    
    
            float: left;
        }
        .fr{
    
    
            float: right;
        }
        .ul1{
    
    
            position: absolute;
            width: 200px;
            height: 460px;
            top:0;
            left:0;
            padding: 0 20px;
            background: rgba(6,6,6,0.3);
            opacity: 0.7;
        }
        .ul1>li{
    
    
            list-style: none;
            width: 200px;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px silver solid;
            color:#EFEFEF;
        }
        .ul1>li{
    
    
            list-style: none;
            width: 200px;
            height: 80px;
            line-height: 80px;
            border-bottom: 1px silver solid;
            color:#EFEFEF;
        }
        .div-center{
    
    
            width: 500px;
            height: 458px;
            border: 1px solid #666666;
            background: url("./img/img.jpg");
            position: absolute;
            left: 240px;
            top:0;
        }
        .div-center{
    
    
            display: none;
        }
        .div-center  .re{
    
    
            color:red;
            margin-left: 50px;
        }
        .div-center .ul2>li{
    
    
            list-style: none;
            width: 500px;
            height: 50px;
            line-height: 50px;
            color:#000000;
            margin-left: 50px;
        }
        .ul2>li .fl>a{
    
    
            padding: 0 16px;
            color:blue;
            text-decoration: none;
        }
      /*----------以上是二级菜单-----------*/
    </style>
</head>
<body>
<div id="box">

    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="jiantou jiantou1 cc">&lt;</div>
    <div class="jiantou jiantou2 cc">&gt;</div>
    <div class="div-dian">
        <span class="span-first"></span>
        <span></span>
        <span></span>
    </div>
    <ul class="ul1">
        <li class="lis">
            <span>手机、配件</span><span class="fr">&gt;</span>
            <div class="div-center">
                <h4 class="re">手机、配件</h4>
                <ul class="ul2">
                    <li>
                        <h4 class="fl">手机通讯:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">手机配件:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">运营商:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">智能设备:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                </ul>
            </div>
        </li>
        <li class="lis">
            <span>电脑</span><span class="fr">&gt;</span>
            <div class="div-center">
                <h4 class="re">电脑</h4>
                <ul class="ul2">
                    <li>
                        <h4 class="fl">手机通讯:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">手机配件:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">运营商:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">智能设备:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                </ul>
            </div>
        </li>
        <li class="lis">
            <span>家用电器</span><span class="fr">&gt;</span>
            <div class="div-center">
                <h4 class="re">家用电器</h4>
                <ul class="ul2">
                    <li>
                        <h4 class="fl">手机通讯:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">手机配件:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">运营商:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">智能设备:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                </ul>
            </div>
        </li>
        <li class="lis">
            <span>家具</span><span class="fr">&gt;</span>
            <div class="div-center">
                <h4 class="re">家具</h4>
                <ul class="ul2">
                    <li>
                        <h4 class="fl">手机通讯:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">手机配件:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">运营商:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                    <li>
                        <h4 class="fl">智能设备:</h4>
                        <p class="fl"><a href="">手机</a>/<a href="">手机维修</a>/<a href="">以旧换新</a></p>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
</div>

<script src="js/index.js"></script>
<script>
    //1.点击箭头切换下一张图片
    var jiantou=document.getElementsByClassName("jiantou");
    var imgs=document.getElementsByClassName("img");//图片
    var box=document.getElementById("box");//大盒子
    var spa=document.getElementsByTagName("span");//点
    var index =0;//默认第一张
    //单击事件-->箭头轮播
    jiantou[1].onclick=function() {
    
    
        lb(true)
    };
    //单击事件<--箭头轮播
    jiantou[0].onclick=function() {
    
    
        lb(false)
    };
    //鼠标移入大盒子 停止轮播
    box.onmouseover=function() {
    
    
        clearInterval(timer)
    };
    //鼠标移出大盒子 继续轮播
    box.onmouseout=function() {
    
    
        timer=setInterval(function() {
    
    lb(true)},1000);
    };

    //间歇调用  (用匿名函数--传参)
    var timer=setInterval(function() {
    
    lb(true)},1000);
    //函数封装
    function lb(n) {
    
    //n为开关进行判断真true或假false
        if(n){
    
    //++
            index++;//递增(往前)
            if(index>2){
    
    //当下标大于2时
                index=0;//默认图片
            }
        }else{
    
    //--
            index--;//递减(倒退)
            if(index<0){
    
    //当下标小于0时,执行index=2
                index=2;//默认最后图片
                //console.log(index=2)
            }
        }
        //循环遍历   （以下公共部分--jiantou）
        for(var i=0;i<imgs.length;i++){
    
    
            imgs[i].style.display="none";//全部隐藏
            spa[i].className="";//空
        }
        imgs[index].style.display="block";//默认当前第一张显示
        spa[index].className="span-first";//默认选中
    }
    //点击某一种项进行跳转某图片
    for(var i=0;i<spa.length;i++){
    
    //点
        spa[i].index=i;//获取所有的下标
        spa[i].onclick=function() {
    
    //单击点
            //循环遍历
            for(var i=0;i<imgs.length;i++){
    
    
                imgs[i].style.display="none";//全部隐藏
                spa[i].className="";//空
            }//this.index:代表点击的某一项下标
            imgs[this.index].style.display="block";//默认当前第一张显示
            spa[this.index].className="span-first";//默认选中
            index=this.index;//下标改成当前的下标 //随机选中的一项
        }
    }
</script>

index.js引入的文件如下：

;
//获取标签
var lis=document.getElementsByClassName("lis");//li
var div_cen=document.getElementsByClassName("div-center");//中间部分
var box=document.getElementById("box");
//循环遍历属性
for(var i=0;i<lis.length;i++){
    
    
    lis[i].index=i;//得到每个下标
    //鼠标移入
    lis[i].onmouseover=function() {
    
    
        for(var j=0;j<div_cen.length;j++){
    
    //其它隐藏
           div_cen[j].style.display="none";//前面的div隐藏
        }
        div_cen[this.index].style.display="block";//当前div显示//this.index:代表当前下标
    };
}
//鼠标移出
  for(var m=0;m<div_cen.length;m++){
    
    //设置中间的div宽度和高度控制隐藏
      div_cen[m].index=m;
      div_cen[m].onmouseleave=function() {
    
    
          for(var j=0;j<div_cen.length;j++){
    
    //其它隐藏
              div_cen[j].style.display="none";//前面的div隐藏
          }
      }
  }

原生JS制作二级菜单+轮播图效果

猜你喜欢