js實(shí)現(xiàn)移動(dòng)端輪播圖效果
更新時(shí)間：2020年12月09日 15:38:07 作者：diasa
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了移動(dòng)端輪播圖效果展示的具體代碼，供大家參考，具體內(nèi)容如下
<!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'>
<!--實(shí)現(xiàn)無縫滾動(dòng):把第一張放末尾 最后一張放開頭-->
<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等原生事件，需要把瀏覽器的默認(rèn)行為阻止掉
$(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;
//計(jì)算出是否滑動(dòng)以及滑動(dòng)的方向：只有是左右滑動(dòng)才進(jìn)行處理
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();
//動(dòng)畫運(yùn)動(dòng)過程中，我們監(jiān)聽一個(gè)定時(shí)器:動(dòng)畫運(yùn)動(dòng)完成判斷當(dāng)前是否運(yùn)動(dòng)到邊界，如果運(yùn)動(dòng)到達(dá)了邊界，我們讓其立馬回到自己的真實(shí)位置
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)
}
//圖片延遲加載，讓當(dāng)前的活動(dòng)塊及相鄰的兩個(gè)活動(dòng)塊進(jìn)行加載
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存儲(chǔ)或者獲取的屬性值都是一個(gè)字符串，如果當(dāng)前的圖片已經(jīng)加載過了，我們就不需要重新的加載了
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>
邊界判斷邏輯可參照下圖
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換
- javascript實(shí)現(xiàn)移動(dòng)端輪播圖
- 原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟
- js實(shí)現(xiàn)移動(dòng)端輪播圖
- JS實(shí)現(xiàn)點(diǎn)擊拉拽輪播圖pc端移動(dòng)端適配
- js原生實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)輪播圖效果的示例
- 利用純js + transition動(dòng)畫實(shí)現(xiàn)移動(dòng)端web輪播圖詳解
- 支持移動(dòng)端原生js輪播圖
- JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
- 基于javascript實(shí)現(xiàn)移動(dòng)端輪播圖效果
相關(guān)文章
IE與FireFox的兼容性問題分析...2007-04-04
BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù)
這篇文章主要介紹了BOOTSTRAP時(shí)間控件顯示在模態(tài)框下面的bug修復(fù),需要的朋友可以參考下2015-02-02
bootstrap daterangepicker雙日歷時(shí)間段選擇控件詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap daterangepicker雙日歷時(shí)間段選擇控件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
js實(shí)現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實(shí)現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果,可實(shí)現(xiàn)在同一頁面中多次調(diào)用幻燈切換效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
es6中class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法的理解與應(yīng)用分析
這篇文章主要介紹了es6中class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法的理解與應(yīng)用,結(jié)合實(shí)例形式分析了es6 class類靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
群里有個(gè)出了一道有趣的題目，分享出來讓大家看看2012-02-02
深入探討JavaScript中parseInt與Number數(shù)字轉(zhuǎn)換方法的區(qū)別
在Javascript編程中,數(shù)字是一種常見的數(shù)據(jù)類型,經(jīng)常需要在不同的情境下進(jìn)行不同類型的操作,本文將深入探討parseInt()和Number()的區(qū)別,通過代碼示例和詳細(xì)解釋,幫助大家更好地理解它們的用途,需要的朋友可以參考下2023-08-08
微信小程序 如何引入外部字體庫iconfont的圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了微信小程序引入外部字體庫iconfont圖標(biāo)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
在JavaScript開發(fā)中,錯(cuò)誤處理是一個(gè)不可忽視的重要環(huán)節(jié),本文將深入探討JavaScript中的錯(cuò)誤處理機(jī)制,包括錯(cuò)誤的類型、捕獲與拋出錯(cuò)誤的方法,需要的可以參考下2024-10-10
JavaScript進(jìn)階（四）原型與原型鏈用法實(shí)例分析
這篇文章主要介紹了JavaScript原型與原型鏈,結(jié)合實(shí)例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05