阅读模式:

js菜单导航效果,带轮播图

查看:1377  :0  类型:  来源:php自学网  标签 html javascript css

js菜单导航效果,带轮播图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>js菜单导航效果,带轮播图</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .window { height:260px;  position: relative;}
    .window .wleft { width:20%; height: 100%; position: relative;}
    .window .wleft ul { width:100%; height:auto; background:#2c2f33; padding:10px 0px;}
    .window .wleft ul li { height:60px; padding:0 15px; }
    .window .wleft ul li > .limenutit {font-size:14px; color:#fff; line-height:60px;}
    .window .wleft ul li:hover { background:rgba(255,255,255,.4);  }
    .window .wleft .leftdata {  display: none; position: absolute; left:100%; z-index: 100; top:0; width: 350%; height: 100%;background:#CDD0D4; color:#4D555D;  padding:10px 20px;}
    .window .wleft .leftdata .ldatatit {   }
    .window .wleft .leftdata span { margin-right:8px;  }
    .window .wright { width:80%; height: 100%; position: relative;}
    .window .wright .wrbanner { position: relative; width: 100%; }
    .window .wright .wrbanner .bannerimg { width: 100%; position:relative; background:#eee;}
    .window .wright .wrbanner .bannerimg a{ height: 260px; display:block; display: none; position:absolute; left:0px; top:0px; width: 100%; color:#fff;}
    .window .wright .wrbanner .bannerimg a:first-child{display:block;}
    .window .wright .wrbanner .bannerimg a img { height: 240px; }
    .window .wright .wrbanner .select { position:absolute; top:230px; right:1%; z-index:101; }
    .window .wright .wrbanner .select a {  display:inline-block; width: 12px; height: 12px; margin-right:5px; border-radius: 100%;background:#fff; }
    .window .wright .wrbanner .select a:hover { background:#ff8400; }
    .window .wright .wrbanner .select a.active { background:#ff8400;  }
    .window .wright .wrbanner .returnleft { background:url('/static/images/returnslide.png'); background-position: -86px 0; position:absolute; top:95px; left:5px; z-index:101; width:41px; height:69px; cursor: pointer; }
    .window .wright .wrbanner .returnleft:hover{ background-position: 0px 0;  }
    .window .wright .wrbanner .returnright { background:url('/static/images/returnslide.png'); background-position: -123px 0; position:absolute; top:95px; right:5px; z-index:101; width:41px; height:69px; cursor: pointer;}
    .window .wright .wrbanner .returnright:hover{ background-position: -43px 0;  }
    .fl { float: left;}
    li{list-style:none}
    </style>
  </head>
  <body>
    <section class="window hidden-xs">
<div>
<div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="fl wleft">
<ul>
<li>
<span>前端开发</span>
<div>
<div>全部&nbsp;&nbsp;></div>
<hr>
<span><a target="_blank" href="/tag-1.html">HTML</a></span>
<span><a target="_blank" href="/tag-3.html">CSS</a></span>
<span><a target="_blank" href="/tag-2.html">Javascript</a></span>
<span><a target="_blank" href="/tag-6.html">Jquery</a></span>
<span><a target="_blank" href="/tag-4.html">HTML5</a></span>
<span><a target="_blank" href="/tag-5.html">CSS3</a></span>
<span><a target="_blank" href="/tag-7.html">Bootstrap</a></span>
<span><a target="_blank" href="/tag-46.html">Node.js</a></span>
</div>
</li>
<li>
<span>后端开发</span>
<div>
<div>全部&nbsp;&nbsp;></div>
<hr>
<span><a target="_blank" href="/tag-8.html">PHP</a></span>
<span><a target="_blank" href="/tag-10.html">ThinkPHP</a></span>
<span><a target="_blank" href="/tag-62.html">Yaf</a></span>
</div>
</li>
<li>
<span>数据库</span>
<div>
<div>全部&nbsp;&nbsp;></div>
<hr>
<span><a target="_blank" href="/tag-9.html">MySql</a></span>
<span><a target="_blank" href="/tag-12.html">Redis</a></span>
<span><a target="_blank" href="/tag-61.html">MongoDB</a></span>
</div>
</li>
<li>
<span>服务器&运维</span>
<div>
<div>全部&nbsp;&nbsp;></div>
<hr>
<span><a target="_blank" href="/tag-11.html">Linux</a></span>
<span><a target="_blank" href="/tag-13.html">Nginx</a></span>
<span><a target="_blank" href="/tag-21.html">CentOS</a></span>
<span><a target="_blank" href="/tag-21.html">Shell</a></span>
<span><a target="_blank" href="/iphp-1-17.html">Lua</a></span>
<span><a target="_blank" href="/iphp-1-8.html">Python</a></span>
</div>
</li>
</ul>

</div>
<div class="fl wright">
<div>
<div>
  <a onclick="window.open('http://www.icoolxue.com/album/show/330','_blank')" href="javascript:;">
  <p style="text-align: center;font-size:24px;margin-top:65px;">Python免费学习视频教程</p>
  <p style="text-align: center;font-size:14px;margin-top:15px;">(推荐)</p>
  </a>
  <a onclick="window.open('http://yun.itheima.com/map/23.html','_blank')" href="javascript:;">
  <p style="text-align: center;font-size:24px;margin-top:65px;">PHP免费学习视频教程</p>
  <p style="text-align: center;font-size:14px;margin-top:15px;">(推荐)</p>
  </a>
  <a onclick="window.open('https://www.imooc.com/course/list?c=linux','_blank')" href="javascript:;">
  <p style="text-align: center;font-size:24px;margin-top:65px;">Linux免费学习视频教程</p>
  <p style="text-align: center;font-size:14px;margin-top:15px;">(推荐)</p>
  </a>
  <a onclick="window.open('http://www.jikexueyuan.com/course/mysql/','_blank')" href="javascript:;">
  <p style="text-align: center;font-size:24px;margin-top:65px;">Mysql免费学习视频教程</p>
  <p style="text-align: center;font-size:14px;margin-top:15px;">(推荐)</p>
  </a>
</div>        
                          
<div></div>
<div></div>
<div></div>

</div>
</div>
</div>
</div>
</div>
</section>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
        $('.window .wleft ul li').each(function(wli){
        $(this).hover(function(){
        $(this).find('.leftdata').show();
        },function(){
        $(this).find('.leftdata').hide();
        });
        });
        
        $('.bannerimg a').eq(0).show().siblings('a').hide();
        
        var radius = '';
        for(b=0;b<$('.bannerimg a').length;b++){
        if(b==0){
        radius += '<a href="javascript:;"></a>';
        }else{
        radius += '<a href="javascript:;"></a>';
        }
        }
        $('.select').html(radius);
        
        
        var banner_index = 0;
        var banner='';
        
        function startbanner(){
        banner = setInterval(function(){
        
        if(banner_index > ($('.bannerimg a').length -1)){
        banner_index = 0;
        }
        selectimg(banner_index);
        banner_index++;
        },3500);
        }
        
        
        function selectimg(banner_i){
        $('.wright .wrbanner .bannerimg a').eq(banner_i).fadeIn().siblings('a').fadeOut();
        $('.wright .wrbanner .select a').eq(banner_i).addClass('active').siblings('a').removeClass('active');
        banner_index = banner_i;
        }
        
        $('.wright .wrbanner .select a').each(function(index){
        $(this).click(function(){
        selectimg(index);
        });
        })
        
        $('.wright .wrbanner').hover(function(){
        clearInterval(banner);
        },function(){
        startbanner();
        });
        
        $('.wrbanner .returnleft').click(function(){
        if(banner_index <=0){
        banner_index--;
        selectimg(banner_index);
        }else{
        banner_index = $('.bannerimg a').length -1;
        selectimg(banner_index);
        }
        });
        
        $('.wrbanner .returnright').click(function(){
        if(banner_index >= $('.bannerimg a').length -1){
        banner_index = 0;
        selectimg(banner_index);
        //alert(banner_index);
        }else{
        banner_index++;
        selectimg(banner_index);
        //alert(banner_index);
        }
        });
        
        });
    </script>
  </body>
</html>

在线预览地址:

index.html

分享到:
0 0

我的看法:

IN: