jquery无缝图片轮播组件封装
程序员文章站
2023-04-08 08:23:24
图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接。
dom结构
首先是dom结构,将所有内容放入一个大盒子,...
图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接。
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"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。