版权声明:作者原创,转载请注明出处!

下面的几个栗子是使用jquery实现Banner轮播的效果,直接将代码贴出来,从最初级没有任何优化和封装的写法,一直到最后一个栗子,一步步进行了优化,加大程序的可复用性,减少代码冗余。

栗子①

HTML布局:注:图片请自己准备,大小为(W:200px  H:200px)

//最外层容器DIV
<div id="wrap">
//图片容器UL
<ul id="imgWrap">
<li id="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
//按钮容器OL
<ol id="numWrap">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
//左右按钮
<div id="left"></div>
<div id="right"></div>
</div>

CSS样式:注:一些较为特殊的样式已经进行说明,请仔细阅读每一个样式添加的意义

* {
margin:;
padding:;
outline:;
border:;
} li {
list-style: none;
} #wrap {
width: 200px;
height: 200px;
margin: 10px auto;
overflow: hidden; /*溢出部分隐藏*/
position: relative;
} #imgWrap {
width: 200px; /*图片容器固定一张图片宽高,在JS里使用代码进行动态控制具体宽、高*/
height: 200px;
position: absolute;
top:;
left:;
transition: all .8s ease; /*设置动画*/
} #imgWrap li {
float: left;
} #numWrap {
position: absolute;
bottom: 10px;
right: 10px;
} #numWrap li {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
float: left;
margin: 5px;
} #numWrap li.color { /*准备class样式*/
background: red;
} #left,
#right {
width: 15px;
height: 20px;
background: #CCCCCC;
position: absolute;
top: 40%;
display: none;
} #left {
left: 10px;
} #right {
right: 10px;
} #wrap:hover #left {
display: block;
} #wrap:hover #right { /*鼠标移入显示左右按钮*/
display: block;
}

jquery和javascript代码:注:请在<head>标签中提前引入jquery文件

$(function() {
var index = 0; //将图片的UL宽度撑大
$("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length); $("#numWrap li").click(function() {
//循环清空
$("#numWrap li").removeClass("color");
//只给点击按钮添加class
$(this).addClass("color");
//点击按钮,显示对应图片
index = $(this).index();
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}); $("#left").click(function() {
//下标--,才会等于-1
index--;
if(index == -1) {
index = $('#imgWrap li').length - 1;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
});
$("#right").click(function() {
//下标++,才会等于长度
index++;
if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
});
//开启定时器
var timer = setInterval(function() {
index++;
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}, 2000); //鼠标移入、移出关闭、开启定时器
$("#wrap").hover(function() {
clearInterval(timer);
}, function() {
timer = setInterval(function() {
index++;
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
$("#numWrap li").removeClass("color");
$("#numWrap li").eq(index).addClass("color");
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}, 2000);
});
});

效果图:

栗子② 注:HTML、css布局及样式同栗子①

jquery及javascript代码

$(function() {
var index = 0; //将图片的UL宽度撑大
$("#imgWrap").css('width', $('#imgWrap li').width() * $("#imgWrap li").length);
//按钮点击
$("#numWrap li").click(function() {
index = $(this).index();
next();
}); $("#left").click(function() {
//下标--,才会等于-1
index--;
next();
});
$("#right").click(function() {
//下标++,才会等于长度
index++;
next();
}); //优化成函数,使用时可以再各处直接调用
function next() {
if(index == -1) {
index = $('#imgWrap li').length - 1;
} else if(index == $('#imgWrap li').length) {
index = 0;
};
//循环清空
$("#numWrap li").removeClass("color");
//只给点击按钮添加class
$("#numWrap li").eq(index).addClass("color");
//点击按钮,显示对应图片
$("#imgWrap").css('left', -$('#imgWrap li').width() * index);
}; //开启定时器
var timer = setInterval(function() {
index++;
next();
}, 2000); //鼠标移入和移出事件清除、开启定时器
$("#wrap").hover(function() {
clearInterval(timer);
}, function() {
//不要写var,否则会开启两次定时器
timer = setInterval(function() {
index++;
next();
}, 2000);
});
});

栗子②主要是对栗子①进行了优化,将重复性代码,放到了next函数里,进行多次调用,程序得到大幅度代码的优化,提高了程序的可复用性。下面我们进行函数的封装,封装好的函数可以的到最大程度的可复用性,相同功能,只需调用相应函数,传入不同参数即可完成,不需要再重新编写相同功能的程序,怎么样,似不似很期待,^_^

栗子③

HTML代码:

<div class="wrap" id="wrap1">
<ul class="imgWrap" id="imgWrap1">
<li class="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.2.jpg" /></li>
<li><img src="img/1.3.jpg" /></li>
<li><img src="img/1.4.jpg" /></li>
</ul>
<ol class="numWrap" id="numWrap1">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="left" id="left1"></div>
<div class="right" id="right1"></div>
</div> <div class="wrap" id="wrap2">
<ul class="imgWrap" id="imgWrap2">
<li class="one"><img src="img/1.1.jpg" /></li>
<li><img src="img/1.2.jpg" /></li>
<li><img src="img/1.3.jpg" /></li>
<li><img src="img/1.4.jpg" /></li>
</ul>
<ol class="numWrap" id="numWrap2">
<li class="color"></li>
<li></li>
<li></li>
<li></li>
</ol>
<div class="left" id="left2"></div>
<div class="right" id="right2"></div>
</div>

这个布局里写了两个要进行轮播的导航,目的是展示程序的可重复使用性

css代码:

* {
margin:;
padding:;
outline:;
border:;
} li {
list-style: none;
} .wrap {
width: 200px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
} .imgWrap {
width: 200px;
height: 200px;
position: absolute;
top:;
left:;
transition: all .8s ease;
} .imgWrap li {
float: left;
} .numWrap {
position: absolute;
bottom: 10px;
right: 10px;
} .numWrap li {
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
float: left;
margin: 5px;
} .numWrap li.color {
background: red;
} .left,
.right {
width: 15px;
height: 20px;
background: #CCCCCC;
position: absolute;
top: 40%;
display: none;
} .left {
left: 10px;
} .right {
right: 10px;
} .wrap:hover .left {
display: block;
} .wrap:hover .right {
display: block;
}

jquery和javascript代码:

$(function() {
//调用
Tab($("#wrap1"),$("#imgWrap1"),$('#imgWrap1 li'),$("#numWrap1 li"),$("#left1"),$("#right1"));
Tab($("#wrap2"),$("#imgWrap2"),$('#imgWrap2 li'),$("#numWrap2 li"),$("#left2"),$("#right2"));
}); //封装成函数
//$("#wrap"),$("#imgWrap"),$('#imgWrap li'),$("#numWrap li"),$("#left"),$("#right")
function Tab(wrap,imgWrap,imgLi,numLi,left,right) {
var index = 0;
//将图片的UL宽度撑大
imgWrap.css('width', imgLi.width() * imgLi.length);
//按钮点击
numLi.click(function() {
index = $(this).index();
next();
}); left.click(function() {
//下标--,才会等于-1
index--;
next();
});
right.click(function() {
//下标++,才会等于长度
index++;
next();
}); //优化成函数,使用时可以再各处直接调用
function next() {
if(index == -1) {
index = imgLi.length - 1;
} else if(index == imgLi.length) {
index = 0;
};
//循环清空
numLi.removeClass("color");
//只给点击按钮添加class
numLi.eq(index).addClass("color");
//点击按钮,显示对应图片
imgWrap.css('left', -imgLi.width() * index);
}; //开启定时器
var timer = setInterval(function() {
index++;
next();
}, 2000); //鼠标移入和移出事件清除、开启定时器
wrap.hover(function() {
clearInterval(timer);
}, function() {
//不要写var,否则会开启两次定时器
timer = setInterval(function() {
index++;
next();
}, 2000);
});
};

效果图:

到这里,就结束啦,具体有什么需要注意的地方,我都已经在代码的注释里写的很明确了,如果大家有更好的方法,欢迎与我交流,共同成长和进步!

入我有理解的不正确的地方,欢迎各位大神批评指正,谢谢

jquery实现导航图轮播的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. 自适应图片宽度的jQuery焦点幻灯轮播代码

    自适应图片宽度的jQuery焦点幻灯轮播代码 注意要1.7.2版本的jq才支持点击后显示点击的图片,不然就是一直顺序播放 演示   XML/HTML Code <div id="sli ...

  5. jQuery补充,基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  6. (转)jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  8. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  9. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

随机推荐

  1. Distributed2:Linked Server Login 添加和删除

    一,通过 sys.sp_addlinkedsrvlogin 创建Linked Server的Login 当在local Server 上需要访问Linked Server时,Local Server ...

  2. IOS 开发中 Whose view is not in the window hierarchy 错误的解决办法

    在 IOS 开发当中经常碰到 whose view is not in the window hierarchy 的错误,该错误简单的说,是由于 "ViewController" ...

  3. 自用迷你版的Deferred

    啥也不说贴代码,项目用 /** * 迷你版的deferred */ function Deferred(func) { if (this instanceof Deferred === false) ...

  4. MVC4做网站后台:用户管理 ——用户组补充

    上次做完发现存在点问题. 1.是类型显示的为数字(如下图): 2.是不能根据类型进行查询. 首先做查询.easyui-datagrid可以添加toolbar. 在datagrid的data-optio ...

  5. lintcode Permutation Index

    题目:http://www.lintcode.com/zh-cn/problem/permutation-index/ 排列序号 给出一个不含重复数字的排列,求这些数字的所有排列按字典序排序后该排列的 ...

  6. ListView+CheckBox实现全选 单击效果

    在网上也找了一些案例,但都是用Map来实现的.我的是把对象绑定到当前控件上.代码稍微简洁. main布局文件:main.xml <?xml version="1.0" enc ...

  7. C++ 与 php 的交互 之----- C++ 获取 网页文字内容,获取 php 的 echo 值。

    转载请声明出处! http://www.cnblogs.com/linguanh/category/633252.html 距离上次 谈 C++ 制作json 或者其他数据传送给 服务器,时隔两个多月 ...

  8. MongoDB的CRUD操作

    1. 前言 在上一篇文章中,我们介绍了MongoDB.现在,我们来看下如何在MongoDB中进行常规的CRUD操作.毕竟,作为一个存储系统,它的基本功能就是对数据进行增删改查操作. MongoDB中的 ...

  9. 关于BFC不会被浮动元素遮盖的一些解释

    简介 在清除浮动一文中提到BFC不会被浮动元素遮盖,并没有详细探究表现行为.规范中指出,在同一个BFC内,作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box. ...

  10. iis7.0上发布mvc4.0网站

    步骤如下: 1.右击需要发布的项目,在弹出的菜单中选择“发布...”选项 2.在“发布web”对话框中进行设置,配置文件名称默认为“配置文件1”可以修改为需要的名字,以便识别,也可以不改.发布方法选择 ...