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>全部 ></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>全部 ></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>全部 ></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>全部 ></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>
在线预览地址: