簡單移動端自適應輪播圖

時間 2019-11-19

標籤簡單移動自適應欄目無線简体版

原文原文鏈接

<!DOCTYPE html>css

<html>html

<head>java

body,dl,h1,h3,h5,h6,hr,p,pre {flex

margin:0;動畫

}

th,td,input,textarea {

padding:0;

}

ol,ul {

margin:0;

padding:0;

list-style:none;

}

input,button {

-webkit-appearance:none;

}

a {

text-decoration:none;

}

.clearfix:after {

content:"200B";

display:block;

height:0;

clear:both;

}

/*banner,滾動圖*/

.banner {

position:relative;

width:100%;

height:4.1rem;

}

.bannerbox,.bannerindex {

position:absolute;

}

.bannerbox {

top:0;

left:0;

right:0;

bottom:0;

z-index:1;

overflow:hidden;

}

.bannerlist {

position:relative;

width:31rem;

overflow:hidden;

}

.bannerlist a {

float:left;

}

.bannerlist img {

display:block;

width:10rem;

height:4.11rem;

border:none;

}

.bannerindex {

right:0;

bottom:.3rem;

/*width:100%*/;

z-index:2;

font-size:0;

text-align:center;

}

.bannerindex li {

display:inline-block;

margin:0 .16rem;

width:.15rem;

height:.15rem;

border-radius:.2rem;

}

.bannerindex li.thisindex {

}

.test{

font-size: 0.2rem;

line-height: 0.4rem;

color: #7297FF;

text-align: center;

}

</style>

(function (_window) {

// 計算dpr

var navigatorUserAgent = navigator.userAgent;

var iPhone = navigatorUserAgent.indexOf("iPhone");

if (iPhone > -1) {

var dpr = Number(window.devicePixelRatio),

one_dpr = 1 / dpr;

} else {

var dpr = 1,

one_dpr = 1;

}

var writeText = "<meta name="viewport" content="width=device-width,initial-scale=" + one_dpr + ",maximum-scale=" + one_dpr + ",minimum-scale=" + one_dpr + ",user-scalable=no">n <meta name="'flexible" content="initial-dpr=" + dpr + "">";

document.write(writeText);

// 計算字體大小

var html = document.getElementsByTagName("html");

var F0 = 75;

html[0].setAttribute("data-dpr", dpr);

var getFontSize = function getFontSize() {

var windowWidth = window.innerWidth;

html[0].style.fontSize = F0 * windowWidth / 750 + "px";

};

// 初始化

getFontSize();

_window.addEventListener("resize", getFontSize, false);

})(window);

</s cript>

</head>

<body>

</div>

</ol>

</div>

<div class="test">banner—swiper</div>

var bannerList = document.getElementById("bannerlist"),

img = bannerList.getElementsByTagName("a"),

bannerIndex = document.getElementById("bannerindex").getElementsByTagName("li"),

bannerBox = document.getElementById("bannerbox"); //touch事件容器

var index = 0,

// 當前索引

maxIndex = img.length - 1,

//最大索引

classname = "thisindex";

var setmain,

// 輪播主體定時器

setframe,

// 連續運動定時器

time = 4000,

// 連續間隔時間

animationIng = 0; // 判斷輪播連續運動定時器是否存在

// 速度和單位

var velocit = 0.65;

var metric = "rem";

// touch事件相關函數

var start = {};

start.x = "";

start.right = "";

start.time = "";

var end = {};

end.x = "";

var html = document.getElementsByTagName("html");

// px to rem

var px2rem = function px2rem(px) {

return px / parseFloat(html[0].style.fontSize);

};

// touchstart

var bannerStartFun = function bannerStartFun(event) {

if (animationIng == 0) {

animationIng = 1;

clearTimeout(setmain);

var e = event.touches[0];

start.x = e.pageX;

start.right = parseFloat(bannerList.style.right);

start.time = +new Date();

document.addEventListener("touchmove", bannerMoveFun, false);

document.addEventListener("touchend", bannerEndFun, false);

}

};

// touchmove

var bannerMoveFun = function bannerMoveFun(event) {

event.preventDefault();

var move = function move() {

var e = event.touches[0];

end.x = e.pageX;

var cha = px2rem(end.x - start.x);

bannerList.style.right = start.right - cha + metric;

};

requestAnimationFrame(move);

};

// touchend

var bannerEndFun = function bannerEndFun(event) {

end.time = +new Date();

if (end.time - start.time >= 50) {

var cha = px2rem(end.x - start.x);

if (Math.abs(cha) >= 2) {

cha > 0 ? endFunB() : endFunA();

} else {

endFunC();

}

} else {

endFunC();

}

document.removeEventListener("touchmove", bannerMoveFun);

document.removeEventListener("touchend", bannerEndFun);

};

// touchend判斷並執行相應的函數

// 加加函數

var endFunA = function endFunA() {

bannerIndex[index].classList.remove(classname);

index == maxIndex ? index = 0 : index++;

bannerIndex[index].classList.add(classname);

animation(20, function () {

enlargeCallBack();

animationIng = 0;

setmain = setTimeout(main, time);

});

};

// 減減函數

var endFunB = function endFunB() {

bannerIndex[index].classList.remove(classname);

index == 0 ? index = maxIndex : index--;

bannerIndex[index].classList.add(classname);

animation(0, function () {

reduceCallBack();

animationIng = 0;

setmain = setTimeout(main, time);

});

};

// index不變的函數

var endFunC = function endFunC() {

animation(10, function () {

animationIng = 0;

setmain = setTimeout(main, time);

});

};

// index++回調函數

var enlargeCallBack = function enlargeCallBack() {

bannerList.appendChild(img[0]);

bannerList.style.right = "10" + metric;

};

// index--回調函數

var reduceCallBack = function reduceCallBack() {

bannerList.insertBefore(img[maxIndex], img[0]);

bannerList.style.right = "10" + metric;

};

// 動畫函數

var animation = function animation(target, callback) {

var v = "";

var start = parseFloat(bannerList.style.right);

start < target ? v = +velocit : v = -velocit;

var frame = function frame() {

var right = parseFloat(bannerList.style.right);

if (Math.abs(target - right) > velocit) {

bannerList.style.right = v + right + metric;

setframe = requestAnimationFrame(frame);

} else {

bannerList.style.right = target + metric;

callback ? callback() : "";

}

};

setframe = requestAnimationFrame(frame);

};

// 輪播主函數

var main = function main() {

animationIng = 1;

bannerIndex[index].classList.remove(classname);

index == maxIndex ? index = 0 : index++;

bannerIndex[index].classList.add(classname);

animation(20, function () {

enlargeCallBack();

animationIng = 0;

setmain = setTimeout(main, time);

});

};

// 初始化

var init = function init() {

bannerList.insertBefore(img[maxIndex], img[0]);

bannerList.style.right = "10" + metric;

bannerIndex[0].classList.add(classname);

bannerBox.addEventListener("touchstart", bannerStartFun, false);

setmain = setTimeout(main, time);

};

init();

</s cript>

</html>

學習交流羣617986737

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。