js实现移动端轮播图效果
程序员文章站
2022-05-26 08:10:46
本文实例为大家分享了移动端轮播图效果展示的具体代码，供大家参考，具体内容如下
本文实例为大家分享了移动端轮播图效果展示的具体代码，供大家参考，具体内容如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="reset.css" rel="external nofollow" >
<style>
html,body{
width:100%;
overflow-x:hidden;
}
html{
font-size:100px;
}
.banner{
position:relative;
height:3rem;
overflow:hidden;
}
.banner .wrapper{
position:absolute;
top:0;
left:-100%;
height:100%;
}
.banner .wrapper .slide{
float:left;
height:100%;
background:#eee;
}
.banner .wrapper .slide img{
display:none;
width:100%;
height:100%;
}
.tip{
position:absolute;
left:0;
bottom:.1rem;
width:100%;
height:.16rem;
text-align:center;
}
.tip li{
display:inline-block;
margin:0 .03rem;
width:.16rem;
height:.16rem;
background:rgba(0,0,0,0.2);
border-radius:50%;
vertical-align:top;
}
.tip li.bg{
background:#007aff;
}
</style>
</head>
<body>
<section class='banner'>
<div class='wrapper'>
<!--实现无缝滚动:把第一张放末尾 最后一张放开头-->
<div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner2.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner3.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner4.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner5.jpg" alt=""></div>
<div class='slide'><img data-src="img/banner1.jpg" alt=""></div>
</div>
<ul class='tip'>
<li class='bg'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<script charset='utf-8' src='zepto.min.js'></script>
<script charset='utf-8'>
//rem
~function(){
document.documentelement.style.fontsize = document.documentelement.clientwidth/640*100 + 'px';
}()
//页面中如果自己使用了touch move等原生事件，需要把浏览器的默认行为阻止掉
$(document).on('touchmove touchstart touchend',function(ev){
ev.preventdefault();
})
//banner
var bannerrender = (function(){
var winw = document.documentelement.clientwidth,
maxl = 0,
minl = 0;
var $banner = $('.banner'),
$wrapper = $banner.children('.wrapper'),
$slidelist = $wrapper.children('.slide'),
$imglist = $wrapper.find('img');
var step = 1,
count = 0,
followtimer = null;
//public fn
function isswipe(strx,stry,endx,endy){
return math.abs(endx - strx)>30 || math.abs(endy - stry) > 30)
}
function swipedir(strx,stry,endx,endy){
return math.abs(endx - strx)>=math.abs(endy - stry)?(endx - strx>0?'right':'left'):(endy - stry>0?'down':'up');
}
//touch start
function dragstart(ev){
var point = ev.touches[0];
$wrapper.attr({
strl:parsefloat($wrapper.css('left')),
strx:point.clientx,
stry:point.clienty,
ismove:false,
dir:null,
changex:null
})
}
//touch move
function draging(ev){
var point = ev.touches[0];
var endx = point.clientx,
endy = point.clienty,
strx = parsefloat($wrapper.attr('strx')),
stry = parsefloat($wrapper.attr('stry')),
strl = parsefloat($wrapper.attr('strl')),
changex = endx - strx;
//计算出是否滑动以及滑动的方向：只有是左右滑动才进行处理
var ismove = isswipe(strx,stry,endx,endy),
dir = swipedir(strx,stry,endx,endy);
if(ismove && /(left|right)/i.test(dir)){
$wrapper.attr({
ismove:true,
dir:dir,
changex:changex
});
var curl = strl+changex;
curl = curl>maxl?maxl:(curl<minl?minl:curl);
$wrapper[0].style.webkittransitionduration = '0s';
$wrapper.css('left',curl);
}
}
//touch end
function dragend(){
var ismove = $wrapper.attr('ismove'),
dir = $wrapper.attr('dir'),
changex = parsefloat($wrapper.attr('changex'));
if(ismove && /(left|right)/i.test(dir)){
if(math.abs(changex)>=winw/2){
if(dir==='left'){
step++;
}else{
step--;
}
}
}
$wrapper[0].style.webkittransitionduration = '.2s';
$wrapper.css('left',-step*winw);
lazyimg();
//动画运动过程中，我们监听一个定时器:动画运动完成判断当前是否运动到边界，如果运动到达了边界，我们让其立马回到自己的真实位置
window.cleartimeout(followtimer)
followtimer = window.settimeout(function(){
if(step===0){
$wrapper[0].style.webkittransitionduration = '0s';
$wrapper.css('left',-(count-2)*winw);
step = count-2;
lazyimg();
}
if(step===count-1){
$wrapper[0].style.webkittransitionduration = '0s';
$wrapper.css('left',-winw);
step = 1;
lazyimg();
}
window.cleartimeout(followtimer)
},200)
}
//图片延迟加载，让当前的活动块及相邻的两个活动块进行加载
function lazyimg(){
var $cur = $slidelist.eq(step),
$tar = $cur.add($cur.prev()).add($cur.next());
$tar.each(function(index,item){
var $img = $(item).children('img');
if($img.attr('isload')==='true'){
//attr存储或者获取的属性值都是一个字符串，如果当前的图片已经加载过了，我们就不需要重新的加载了
return;
}
var oimg = new image;
oimg.src = $img.attr('data-src');
oimg.onload = function(){
$img.attr({
src:this.src,
isload:true
}).css('display','block')
oimg = null;
}
})
}
return{
init:function(){
//init css style
count = $slidelist.length;
minl = -($slidelist.length-1)*winw;
$wrapper.css('width',$slidelist.length*winw);
$slidelist.css('width',winw);
//lazy img
lazyimg();
$banner.on('touchstart',dragstart).on('touchmove',draging).on('touchend',dragend)
}
}
})()
bannerrender.init();
</script>
</body>
</html>
边界判断逻辑可参照下图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。