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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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&amp;mysql(五)
2006/10/09 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
java字符串格式化输出实例讲解
2021/01/06 Python
工业学校毕业生自荐信范文
2014/01/03 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
区域销售大会开幕词
2016/03/04 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL