分享一个自己做的图片轮播的插件

现在的网站经常会有一些图片轮播效果,网上也有很多各式各样的图片轮播插件,什么样的效果都有,这里分享一个我自己写的图片轮播效果

这个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
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页