分享一个自己做的图片轮播的插件
2015-11-15 22:40
726 查看
现在的网站经常会有一些图片轮播效果，网上也有很多各式各样的图片轮播插件，什么样的效果都有，这里分享一个我自己写的图片轮播效果
这个Lightbox有一个窗口容器，容器里面有一个长的容器，横向包住了所有图片，通过改变他的margin-left来实现左右效果的。
图片下方有图片个数对应的黑方块，点击黑方块也可以跳到对应的图片上去；
这个插件的最大的特点是可以根据里面的图片个数来实现切换，而且当滑到最后一张图片的时候时，再次点击右侧的按钮，右边回出现第一张图片，这样实现了循环播放。
图片的样式和按钮的样式我没有来得及调试，大家可以按照自己想要的效果来更改css
代码如下：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
<script src="jquery.js"></script>
<script src="lightbox.js"></script>
<style>
body{
padding: 0px;
margin: 0px;
}
img {
border: 0px;
}
.container {
width:1000px;
margin: 0 auto;
overflow: hidden;
margin-top: 100px;
}
.img_box {
overflow: hidden;
position: relative;
}
.img_list {
overflow: hidden;
}
.img_list img{
width: 1000px;
float: left;
}
#btnLeft {
padding: 30px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 262px;
left: 0px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
}
#btnRight {
padding: 30px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 262px;
right: 0px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
}
.buttons {
position: absolute;
bottom: 0px;
overflow: hidden;
left: 50%;
transform: translate3d(-50%,0,0);
}
.buttons div {
width: 20px;
height: 20px;
background-color: #ffffff;
float: left;
margin-right: 10px;
border: 1px solid #000000;
}
.buttons div.activeDiv {
border: 1px solid #ffffff;
background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="img_box">
<div class="img_list">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
<img src="images/04.jpg">
</div>
<div id="btnLeft">
左
</div>
<div id="btnRight">
右
</div>
<div class="buttons">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var lightbox = new LightBox();
});
</script>
</body>
</html>
Lightbox.js：
;(function(){
var LightBox = function(){
var self = this;
//需要用到的数据
imgWidth = $(".img_list img").width();
imgNumber = $(".img_list img").size();
allWidth = imgWidth * (imgNumber + 1) ;
//
$(".img_list").width(allWidth);
//默认给第一张图片添加class
$(".img_list img:first").addClass("activeImg");
for(var i = 0; i < imgNumber; i++){
$(".buttons").append("<div id='d"+i+"'></div>");
}
$("#d0").addClass("activeDiv");
$(".buttons div:last").css({"marginRight":"0px"});
//给按钮绑定事件
$("#btnLeft").click(self.previousPic);
$("#btnRight").click(self.nextPic);
$(".buttons div").click(self.btnTab);
};
LightBox.prototype = {
nextPic:function(){
//获取到当前显示的图片
var nI = $(".activeImg").index();
//获取到当前显示的按钮
var nD = $(".activeDiv").index();
//移动一定的长度
if(nI<imgNumber - 1){
$(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (nI+1) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (nD+1) +")").addClass("activeDiv");
});
}else {
//看到最后一张图片再点击向右的时候
//复制第一张图片到队列最后
$(".activeImg").after($(".img_list img:first").clone(true));
//移动到最后一张图片位置
$(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
//将此事的margin归零，回到了最开始的位置
$(".img_list").css({marginLeft:0});
//将刚复制删除
$(".img_list img:last").remove();
//添加标记
$(".img_list img").removeClass("activeImg");
$(".img_list img:first").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:first").addClass("activeDiv");
});
}
},
previousPic:function(){
//获取到当前显示的图片
var nI = $(".activeImg").index();
//获取到当前显示的按钮
var nD = $(".activeDiv").index();
//移动一定的长度
if(nI==0){
//将最后一张复制到最前面
$(".activeImg").stop().before($(".img_list img:last").clone(true));
//将窗口移动到第二章图片的位置
$(".img_list").css({marginLeft:-imgWidth});
//将窗口动画到第一张图片的位置
$(".img_list").stop().animate({marginLeft:0},500,function(){
//删除第一张图片
$(".img_list img:first").remove();
//将窗口移动到最后以上图片
var lastPicMarginLeft = (imgNumber - 1) * imgWidth;
$(".img_list").css({marginLeft:-lastPicMarginLeft});
//添加标记
$(".img_list img").removeClass("activeImg");
$(".img_list img:last").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:last").addClass("activeDiv");
});
//移动到最前面
}
else {
$(".img_list").stop().animate({marginLeft:-1000*(nI-1)},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (nI-1) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (nD-1) +")").addClass("activeDiv");
});
}
},
btnTab:function(e){
var targetElementId = e.target.id;//获取到鼠标点击到的html节点
var target = $(".buttons div#"+targetElementId);
var n = target.index();
//移动一定的长度
$(".img_list").stop().animate({marginLeft:-imgWidth*n},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (n) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (n) +")").addClass("activeDiv");
});
}
};
window["LightBox"] = LightBox;
})(jQuery);
在项目中引入jquery，并且把页面中的图片换掉即可，
注意，图片应选择大的图片，因为这个图片轮播的效果就是要大的图片才好看，尽量选择宽度大于1000px的图片
index.html
这个Lightbox有一个窗口容器，容器里面有一个长的容器，横向包住了所有图片，通过改变他的margin-left来实现左右效果的。
图片下方有图片个数对应的黑方块，点击黑方块也可以跳到对应的图片上去；
这个插件的最大的特点是可以根据里面的图片个数来实现切换，而且当滑到最后一张图片的时候时，再次点击右侧的按钮，右边回出现第一张图片，这样实现了循环播放。
图片的样式和按钮的样式我没有来得及调试，大家可以按照自己想要的效果来更改css
代码如下：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
<script src="jquery.js"></script>
<script src="lightbox.js"></script>
<style>
body{
padding: 0px;
margin: 0px;
}
img {
border: 0px;
}
.container {
width:1000px;
margin: 0 auto;
overflow: hidden;
margin-top: 100px;
}
.img_box {
overflow: hidden;
position: relative;
}
.img_list {
overflow: hidden;
}
.img_list img{
width: 1000px;
float: left;
}
#btnLeft {
padding: 30px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 262px;
left: 0px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
}
#btnRight {
padding: 30px;
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 262px;
right: 0px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
cursor: pointer;
}
.buttons {
position: absolute;
bottom: 0px;
overflow: hidden;
left: 50%;
transform: translate3d(-50%,0,0);
}
.buttons div {
width: 20px;
height: 20px;
background-color: #ffffff;
float: left;
margin-right: 10px;
border: 1px solid #000000;
}
.buttons div.activeDiv {
border: 1px solid #ffffff;
background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="img_box">
<div class="img_list">
<img src="images/01.jpg">
<img src="images/02.jpg">
<img src="images/03.jpg">
<img src="images/04.jpg">
</div>
<div id="btnLeft">
左
</div>
<div id="btnRight">
右
</div>
<div class="buttons">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var lightbox = new LightBox();
});
</script>
</body>
</html>
Lightbox.js：
;(function(){
var LightBox = function(){
var self = this;
//需要用到的数据
imgWidth = $(".img_list img").width();
imgNumber = $(".img_list img").size();
allWidth = imgWidth * (imgNumber + 1) ;
//
$(".img_list").width(allWidth);
//默认给第一张图片添加class
$(".img_list img:first").addClass("activeImg");
for(var i = 0; i < imgNumber; i++){
$(".buttons").append("<div id='d"+i+"'></div>");
}
$("#d0").addClass("activeDiv");
$(".buttons div:last").css({"marginRight":"0px"});
//给按钮绑定事件
$("#btnLeft").click(self.previousPic);
$("#btnRight").click(self.nextPic);
$(".buttons div").click(self.btnTab);
};
LightBox.prototype = {
nextPic:function(){
//获取到当前显示的图片
var nI = $(".activeImg").index();
//获取到当前显示的按钮
var nD = $(".activeDiv").index();
//移动一定的长度
if(nI<imgNumber - 1){
$(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (nI+1) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (nD+1) +")").addClass("activeDiv");
});
}else {
//看到最后一张图片再点击向右的时候
//复制第一张图片到队列最后
$(".activeImg").after($(".img_list img:first").clone(true));
//移动到最后一张图片位置
$(".img_list").stop().animate({marginLeft:-imgWidth*(nI+1)},500,function(){
//将此事的margin归零，回到了最开始的位置
$(".img_list").css({marginLeft:0});
//将刚复制删除
$(".img_list img:last").remove();
//添加标记
$(".img_list img").removeClass("activeImg");
$(".img_list img:first").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:first").addClass("activeDiv");
});
}
},
previousPic:function(){
//获取到当前显示的图片
var nI = $(".activeImg").index();
//获取到当前显示的按钮
var nD = $(".activeDiv").index();
//移动一定的长度
if(nI==0){
//将最后一张复制到最前面
$(".activeImg").stop().before($(".img_list img:last").clone(true));
//将窗口移动到第二章图片的位置
$(".img_list").css({marginLeft:-imgWidth});
//将窗口动画到第一张图片的位置
$(".img_list").stop().animate({marginLeft:0},500,function(){
//删除第一张图片
$(".img_list img:first").remove();
//将窗口移动到最后以上图片
var lastPicMarginLeft = (imgNumber - 1) * imgWidth;
$(".img_list").css({marginLeft:-lastPicMarginLeft});
//添加标记
$(".img_list img").removeClass("activeImg");
$(".img_list img:last").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:last").addClass("activeDiv");
});
//移动到最前面
}
else {
$(".img_list").stop().animate({marginLeft:-1000*(nI-1)},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (nI-1) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (nD-1) +")").addClass("activeDiv");
});
}
},
btnTab:function(e){
var targetElementId = e.target.id;//获取到鼠标点击到的html节点
var target = $(".buttons div#"+targetElementId);
var n = target.index();
//移动一定的长度
$(".img_list").stop().animate({marginLeft:-imgWidth*n},500,function(){
$(".img_list img").removeClass("activeImg");
$(".img_list img:eq("+ (n) +")").addClass("activeImg");
$(".buttons div").removeClass("activeDiv");
$(".buttons div:eq("+ (n) +")").addClass("activeDiv");
});
}
};
window["LightBox"] = LightBox;
})(jQuery);
在项目中引入jquery，并且把页面中的图片换掉即可，
注意，图片应选择大的图片，因为这个图片轮播的效果就是要大的图片才好看，尽量选择宽度大于1000px的图片
index.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自己动手开发jQuery插件教程
- 20款超赞的jQuery插件 Web开发人员必备
- jQuery插件Tmpl的简单使用方法
- jQuery实现图片渐入渐出切换展示效果
- 精选的10款用于构建良好易用性网站的jQuery插件
- Web开发者必备的12款超赞jQuery插件
- 自编jQuery插件实现模拟alert和confirm
- jquery插件珍藏(图片局部放大/信息提示框)
- 2013年优秀jQuery插件整理小结
- 非常有用的40款jQuery 插件推荐（系列二）
- 改善用户体验的五款jQuery插件分享
- jQuery插件原来如此简单 jQuery插件的机制及实战
- jQuery插件开发基础简单介绍
- myeclipse安装jQuery插件的方法
- jquery插件之定时查询待处理任务数量
- 写JQuery插件的基本知识
- 前端交互消息显示插件 jQuery Messenger（基于jQuery）
- 使用 jquery.easing.js 增强动画过渡效果
- ajax读取数据后使用jqchart显示图表的方法
- AspNet中使用JQuery boxy插件的确认框