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点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery操作cookie的示例代码
Jun 05 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现可以扩展的日历
Dec 01 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的无限分类实现想法~
2007/01/02 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
python删除列表内容
2015/08/04 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
服务之星获奖感言
2014/01/21 职场文书
单位成立周年感言
2014/01/26 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
质量承诺书格式
2014/05/20 职场文书
新党章心得体会
2014/09/04 职场文书
增值税发票丢失证明
2015/06/19 职场文书
《包身工》教学反思
2016/02/23 职场文书