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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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制作静态网站的模板框架(一)
2006/10/09 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
Marlies Dekkers内衣美国官方网上商店:高端内衣品牌
2018/11/12 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
四年级数学教学反思
2014/02/02 职场文书
《自选商场》教学反思
2014/02/14 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
小学捐书活动总结
2014/07/05 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
文明单位汇报材料
2014/12/24 职场文书
初中优秀学生评语
2014/12/29 职场文书
员工辞职信范文
2015/03/02 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
开学第一周值周总结
2015/07/16 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python