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

最新推荐文章于 2024-05-17 01:50:40 发布
最新推荐文章于 2024-05-17 01:50:40 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： jQuery 文章标签： jquery插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014267351/article/details/49853653
版权

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

这个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
Aus0049
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
学习前端前期想做出轮播图效果之swiper插件的介绍
小杨的博客
07-23 990
swiper是什么？ swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。 基本用法 swiper使用需要两个文件，一个是swiper.css，里面..swiper是什么？ swiper是一款轻量级的轮播图插件，不仅支持pc端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。 基本用法 swiper使用需要两个文件，一个是swiper.css，里面..swiper是什么？ swiper是一款轻量级的
来给你20个优秀的......前端轮播图插件
实验楼--动手做实验，轻松学IT！
05-06 668
上期入口：24个 CSS 高级技巧合集 这20个，可都是咱们村最好的，年龄都不超过25，一个比一个长的好看。你加人家微信先聊，总有一个你喜欢的。老大不小的人了，别太挑，遇到合适的，就去Github搬过来用。 提示：上图所有项目地址，也可以可在公众号后台回复关键字 “轮播图插件” 获取MD版本。 Swiper 使用硬件加速过渡的移动设备触控滑块框架。 官网：https://github.co...
前端轮播图插件
qq_50031016的博客
04-22 466
推荐20个优秀的前端轮播图插件 Swiper 使用硬件加速过渡的移动设备触控滑块框架。 官网：https://github.com/nolimits4web/Swiper slick 你所需要的最后一个轮播插件。 官网：https://github.com/kenwheeler/slick slidesJs 响应式的 jQuery（1.7.1+）幻灯片插件，具有触摸、 CSS3 过渡等特性。 官网：http://www.slidesjs.com/ FlexSlider 一款令人惊叹的、全响应式的幻灯片 j
前端全屏（轮播）滚动插件
最新发布
2401_84091544的博客
05-17 447
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
自己动手写一个简单图片轮播的控件
y1962475006的博客
07-10 405
简单图片轮播的控件的实现本人菜鸟。 之前想找个轮播的控件，网上找了几篇文章，觉得搞的很复杂，思路也不是很清晰。所以干脆就自己写了。总的来说，是比较简单的。思路：图片轮播，其实就是滑动图片由手动改为自动而已。针对滑动图片，我立刻想到两个方案： horizontalScrollView 水平scrollView，本来就是滑动的，可以在它的childView中添加要显示的视图。 viewPager
一个非常简洁的 jQuery 图片轮播插件
热门推荐
kevin_xiang的专栏
07-02 1万+
http://wuzhuti.cn/644.html Slides 是一个非常简洁的 jQuery 图片轮播插件，其特点是自动循环播放、图片预加载以及自动分页功能。 SlidesJS is a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3 transi
jQuery 一个图片切换的插件
10-28
B/S开发的朋友，首页常常需要一些新闻图片切换的特效，鉴于jQuery良好的插件开发机制，我也常常自己写一些实用的小插件，这里分享一个新闻图片切换插件
jQuery插件实现带圆点的焦点图片轮播切换
01-19
这次分享的代码是jQuery插件，HovertreeImg是一个图片轮播jquery插件，使用方便，可以设置大小，圆点位置等，代码简洁 <!DOCTYPE html> <html> <head> <meta ...
js图片轮播插件的封装
12-07
本文为大家分享了js图片轮播插件的具体代码，供大家参考，具体内容如下 我封装的这个轮播插件只需要获取到图片和按钮就可以啦。 css 样式 .body{ width: 700px; margin: 100px auto; position: relative; ...
33个优秀的 jQuery 图片展示插件分享
10-28
1. **Foxibox**：这是一个轻量级的插件，提供了优雅的图片弹出框，支持全屏模式，为用户提供了一种沉浸式的浏览体验。 2. **MobilySelect**：虽然不是专门的图片展示插件，但可以用于创建美观的下拉菜单，为图片...
jQuery图片播放8款精美插件分享
10-27
在网页设计和开发中，jQuery图片播放插件是...无论你是前端开发者还是网页设计师，这些插件都能为你的作品增色不少，同时也提供了一个学习和研究jQuery动画效果的平台。记得收藏这些资源，以便日后需要时能够快速找到。
图片轮播前端实现的三种方式（jquery插件）
08-29
实现图片轮播的三种方式，能够对图片的轮播进行切换，三种方式都是通过使用jquery插件，比较简单方便，有参考的事例
自己封装的jquery插件@实现了简单的轮播图
01-21
自己封装的jquery插件@实现了简单的轮播图以及图片点击后的回调实现，自动播放等，
轮播图的插件
12-18
简单的轮播插件，勿喷，不会的可以看看里面的代码对自己进行一些提高
脚本做图片轮播
weixin_30363981的博客
05-21 127
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head...
开发一款高复用的前端轮播图插件
brokenkay的博客
09-24 364
1.需求: 目前项目中很多页面都用到了轮播图,虽然轮播图的展现形式不一样,但是我们可以把轮播图的共性给抽象出来,开发出一款插件,让使用到轮播图的页面都引用这个插件.当前这款插件是使用jquery开发的,兼容IE8. 2.结果图: 2.具体实现 2.1 js文件 (function(){ function Caro...
前端轮播图插件-swiper初识
AAAAAyo的博客
12-22 1124
项目中需要实现轮播图效果，平时对这部分用的比较少 可以使用swiper插件实现 只需要把插件的js和css放到文件夹并正确引用 在html里面只需粘贴对应效果图的代码即可 注意：版本要对应，3和4在一些js使用上有区别 点这里到-&gt;swiper中文网 ...
javascript 笔试 做一个图片轮播的脚本
summer7310的专栏
10-08 669
方法一：             autoChangeImages                         -->         #contain{     float:left;     width: 900px;     height: 240px;     border: 1px dotted red; } .imageShow{
js 图片轮播插件
Rand Tsui
06-28 487
本插件调用很简单，显示效果也很简单，绝大部分工作用js完成，这是第一版，有个小问题需要改进一下，改进版可以满足传参，一个窗口显示多个图片轮播，这个由读者完成 HTML页 Pictures2 CSS页 *{ margin:0px; padding:0px; } body { background-co
ECShop二次开发实战：47个插件案例详解
本资源是一份全面的ECSHOP二次开发教程，包含了47个实用的插件开发案例，这些案例涵盖了ECSHOP电商平台系统的多个关键功能的增强与优化。教程内容丰富，适合对ECSHOP有基础了解并希望深入学习二次开发的开发者参考。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值