jquery实战2：轮播图和滑动导航效果

最新推荐文章于 2023-12-23 19:22:11 发布

想旅游咯

最新推荐文章于 2023-12-23 19:22:11 发布

阅读量2.8k

点赞数

分类专栏： web前端

web前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

jquery实战2：轮播图和滑动导航效果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:rgba(155,122,44,0.3)}

.nav{width:1200px;height:36px;margin:5px auto;border-bottom:3px solid #ccc;position:relative;}
.nav ul{font-size:16px;font-family:"微软雅黑";font-weight:700;color:#000;}
.nav ul li{width:80px;float:left;list-style:none;line-height:36px;text-align:center;margin:0px 2px;}
.nav ul li a{text-decoration:none;font-size:16px;font-family:"微软雅黑";font-weight:700;color:#000;}
.nav ul li a:hover{color:#aaa;cursor:pointer;}
.nav .cursor{width:80px;height:0px;border-top:3px solid #000;position:absolute;top:36px;left:0px;}

.banner{width:100%;height:450px;position:relative;z-index:0;}
.banner .b-img{width:100%;height:450px;position:absolute;left:0px;top:0px;}/**/
.banner .btn{width:100px;height:30px;position:absolute;bottom:0px;left:47%;z-index:2;}
.banner .btn ul{background:black;opacity:0.8;filter:alpha(opacity=80);display:inline-block;padding:1px 18px;border-radius:15px;}/*控制透明度，必须为块级元素，此处适合用行内块级元素。当然透明度也可以用rgba(0,0,0,.5)的颜色方案。padding用来撑开盒子变大些。*/
.banner .btn ul li{list-style:none;float:left;width:16px;height:16px;background:url('./images/1.png');margin:0 2px 0 2px;}
.banner .btn ul .on{background:url('images/2.png') no-repeat;}/*这里为类名为On的li标签作了单独的样式定义，是为了作为默认的选中的标签，用的是黄色的原点背景图片2.png，后面可用jquery对dom树操作给选中的其他li标准添加此样式，并移除未被选中的标签的此样式，即变为白色的背景图片1.png.与上面的.banner .btn ul li｛｝定义的样式一样就是背景图片不一样，其他的其实是继承了li的一些属性值。*/

</style>
</head>
<body>

<div class="btn">
     <ul>
  <li class="on"></li>
  <li></li>
  <li></li>
</ul>
</div>

</div>

<div class="nav" >
<ul id="n_ul">
<li><a href="#">首页</a></li>
<li><a href="#">编程开发</a></li>
<li><a href="#">职业技能</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">IT设计</a></li>
<li><a href="#">生活百科</a></li>
<li><a href="#">英语教程</a></li>
<li><a href="#">泰语教程</a></li>
<li><a href="#">投资理财</a></li>
<li><a href="#">时尚健康</a></li>
<li><a href="#">公务员</a></li>
<li><a href="#">财会教程</a></li>
<li><a href="#">工程教程</a></li>
<li><a href="#">其它</a></li>
</ul>

<p class="cursor"></p>
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

/*导航开始*/
$("#n_ul").find("li").hover(function(){
var auto_left=($(window).width() - 1200)/2//计算距左侧的距离：窗口的动态宽度-标签定义的宽度1200除以2就是第一个Li标签距左侧的距离。
var _left=$(this).offset().left-auto_left;//当前选中标签离左边的距离-第一个li标签距左侧的距离就是该Li标签的绝对定位left的值.
$(".nav").find(".cursor").stop();//这里不用stop停止的话，之前的事件无法停下来，就会积累效果，导致滑动的时间很长，不能立马响应。也就是下次动画之前必须把上次的动画停止下来。
$(".nav").find(".cursor").animate({left:_left},100);//100毫秒内移动P标签样式为一根线到相应的位置，根据鼠标所放置的Li标签的位置决定的。
});
/*导航结束*/

/*轮播图开始*/
$(".btn").find("li").mouseover(function(){
$(this).addClass("on").siblings().removeClass("on");//根据类名.btn遍历到此类名下面的所有li标签的集合，用addClass给这些标签添加on的样式。但是后面又用取得相邻的元素并去除On样式。所以只会显示当前选中的li标签的on样式。不做这siblings().removeClass("on")处理会导致选中后无法去除。

$(".b-img").css({"z-index":0});//给所有的轮播图设置z-index：为0，级别最低，
var _index=$(this).index();//获取索引值。
$('.b-img').eq(_index).css("z-index",1).fadeTo(1000,1);//根据所选的li标签的索引号，来改变z-index值为1，这样就把所选的图片调到最上方显示了。
});
/*轮播图结束*/
</script>
</body>
</html>

想旅游咯

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
jquery实战2：轮播图和滑动导航效果

jquery实战2：轮播图和滑动导航效果 Document *{margin:0px;padding:0px;} body{background:rgba(155,122,44,0.3)} .nav{width:1200px;height:36px;margin:5px auto;border-bo
复制链接

扫一扫