您的位置：首页 > Web前端 > JQuery

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

2015-06-06 12:22 851 查看

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="banner">

<div class="b-img" style="background:url('./images/1.jpg') no-repeat center; z-index:1;"></div>

<div class="b-img" style="background:url('./images/2.jpg') no-repeat center;"></div>

<div class="b-img" style="background:url('./images/3.jpg') no-repeat center;"></div>


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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航