js菜单导航效果,带轮播图_UI设计-终身学习网

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

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

UI设计相关栏目本月热门文章