jquery无缝图片轮播组件封装


Posted in jQuery onNovember 25, 2020

图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接。

dom结构

首先是dom结构,将所有内容放入一个大盒子,应用ul标签存放图片列表,圆点定位图片位置。

<div id="box">
 <ul id="banners">
  <li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
  <li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
  <li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
  <li class="banners-img"><img src="img/DSC_1913.JPG" /></li>
  
 </ul>
 <ul class="num">
  <li class="on"></li>
 </ul>
  <div class="btns btn_l"><</div>
  <div class="btns btn_r">></div>
</div>

下面是盒子样式,这里使用百分比自适应,大盒子使用overflow: hidden;防止图片溢出,将ul宽设置为图片总宽度+1(这里+1后面会有用到)。

#box{
 width:100%;
 height:40.0em;
 overflow: hidden;
 position: absolute;
}
 #box #banners{
 width:500%;
 position: relative;
}
 #box .banners-img{
 float: left;
 width:20%;
 height:40.0em;
}
 #box .banners-img img{
 width:100%;
 height: 100%;
}
 .num{
 width:10%;
 height:2.0em;
 position: relative;
 top: 82%;
 left: 40%;
 -webkit-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform:rotate(-90deg);
}
 .num li{
 width:2.0em;
 height:100%;
 position: relative;
 border-radius: 50%;
 background-color: grey; 
}
 .num .on{
 background-color: black;
}
 
 .btns{
 width:1.0em;
 height:1.0em;
 background-color: rgba(0,0,0,0.5);
 position:relative;
 top:50%;
 color: white;
 font-size: 3.0em;
 text-align: center;
 line-height: 1.0em;
 cursor: pointer;
 display: none;
}
 #box:hover .btns{
 display: block;
}
 .btn_l{
 left: 0;
}
 .btn_r{
 right:0;
}

组件使用jquery编写

function addImg(item,arrSrc){ //添加图片,这里需同时修改样式,读者可自行修改
  for(let i = 0;i<item;i++){
   item[i].attr('src',arrSrc[i]);
      }
     }
    var srcs = ['img/DSC_1913.JPG','img/DSC_1914.JPG','img/DSC_1915.JPG','img/DSC_1916.JPG'];
    addImg($('.banners-img img'),srcs);
 
 var Clone = $("#banners li").first().clone();
 //追加一张图片,轮到最后一张时能够自然过渡,这里初学者需慢慢体会
 $("#banners").append(Clone);
 var Size = $("#banners li").size();
 //alert(Size);
 for(var j=0;j<Size-2;j++){
 $(".num").append("<li></li>");
 }
 
 //获取图片宽度
 var imgWidth = parseInt($("#banners .banners-img").css("width"));
 //因宽度为百分比,窗口大小变化时需重新获取
 window.onresize = function(){
 var newWidth = $("#banners .banners-img").css("width");
   imgWidth = parseInt(newWidth);
 }
 //鼠标移到按钮时轮播
 $(".num li").hover(function(){
 var index = $(this).index();
 i=index;
 $("#box #banners").stop().animate({left:-i*imgWidth},500);
 $("#box .num li").eq(i).addClass("on")
 .siblings().removeClass("on");
 
 })
 //自动轮播
 var t = setInterval(function(){
  i++;
  move();
 },3000);
 //鼠标移入时停止自动轮播
 $("#box").hover(function(){
  clearInterval(t);
 },function(){
  t = setInterval(function(){
  i++;
  move();
 },3000);
 })
 
 //手动轮播
 $("#box .btn_l").click(function(){
  i--;
  move();
 });
 
 $("#box .btn_r").click(function(){
  i++;
  move();
 });
 
 //封装一个运动函数
 // alert(imgWidth);
 function move(){
  if(i==Size){ //当轮播到最后一张时过渡到第一张图片
  $("#box #banners").css({left:0});
  i=1;
  }
  if(i==-1){
  $("#box #banners").css({left:-(Size-1)*imgWidth});
  i=Size-2;
  }
  $("#box #banners").stop().animate({left:-i*imgWidth},500);
  if(i==Size-1){
  $("#box .num li").eq(0).addClass("on")
  .siblings().removeClass("on");
  }else{
  $("#box .num li").eq(i).addClass("on")
  .siblings().removeClass("on");
  }
  
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 #jQuery
JQuery中queue方法用法示例
Jan 31 #jQuery
AJAX在JQuery中的应用详解
Jan 30 #jQuery
jQuery访问json文件中数据的方法示例
Jan 28 #jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 #jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 #jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
You might like
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
php常用的工具开发整理
2019/09/26 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
进一步探究Python中的正则表达式
2015/04/28 Python
python统计日志ip访问数的方法
2015/07/06 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python版DDOS攻击脚本
2019/06/12 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
岗位竞聘演讲稿范文
2014/04/24 职场文书
治超工作实施方案
2014/05/04 职场文书
人事局接收函
2015/01/30 职场文书
回复函范文
2015/07/14 职场文书
科级干部培训心得体会
2016/01/06 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers