封装一个无缝图片轮播组件
2018-03-31 21:52
330 查看
图片轮播在我们的前端开发中是非常常见的,下面是自己写的一个图片轮播组件,支持自动轮播,手动轮播,无缝衔接。
<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%;
}
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);
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"); } }
相关文章推荐
- 详解如何将angular-ui的图片轮播组件封装成一个指令
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- [置顶] 利用jquery和原生Js封装一个上传图片的组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- iOS开发之多图片无缝滚动组件封装与使用
- VUE开发一个图片轮播的组件示例代码
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- iOS开发之多图片无缝滚动组件封装与使用
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- VUE开发一个图片轮播的组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- Angular2组件与指令的小实践——实现一个图片轮播组件
- iOS开发之多图片无缝滚动组件封装与使用