h5原生js實現輪播圖
阿新 • • 發佈：2017-06-15
list sla head log startx creat ase hit eve
預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <title>scroll</title> <style> body,ul,li { padding: 0; margin: 0; } .con { width: 6.4rem; height:4rem; position: relative; left: 0; top: 0 } </style> </head> <body> <div class="con"></div> <script> function slide(options) { var options = options || {}; var img = options.img || [ ‘http://fmn.rrfmn.com/fmn070/20170518/1820/original_ouZ8_daca000044b31e7f.jpg‘, ‘http://hdn.xnimg.cn/photos/hdn121/20170519/1530/h_large_O9z4_a69d000420c1195a.jpg‘, ‘http://fmn.rrimg.com/fmn073/20170518/1815/original_FRpD_0db800002f041e83.jpg‘, ‘http://fmn.rrimg.com/fmn077/20170428/1910/original_ogL5_c5c2000e38381e84.jpg‘, ‘http://fmn.rrimg.com/fmn076/20170508/0930/original_nlQe_924f000d99bb1e83.jpg‘ ], conWidth = 0, conHeight = 0, currentX = 0, currentY = 0, startX = 0, startY = 0, endX = 0, endY = 0, ulPos = 0, con = document.querySelector(options.className), imgarr = [], currentImg = 1, imgIndex = [], setIntervalTimer = 0, slideTime = options.slideTime || 3000, transitionTime = options.transitionTime || 500, imgLength = img.length; function init() { initREM(); getConStyle(); initDOM(img); initDot(); setParentStyle(); changeDotStyle(); bindEvent(); timer(); } function initREM() { var html = document.querySelector(‘html‘); function setFontSize() { html.style.fontSize = 0.15625 * window.innerWidth + ‘px‘; } setFontSize(); window.onresize = setFontSize; } function initDOM(arr) { var html = arr.map(function(element, index) { imgarr.push(index); imgIndex.push(index); return ‘<li style="width:‘+ conWidth +‘px;left:‘+ conWidth*(index - 1) +‘px;position:absolute;top:0;list-style-type:none;height:100%;display:inline-block;"><img src="‘+ element +‘" style="width:100%;height:100%;margin:0;padding:0;"></li>‘; }).join(‘‘); document.querySelector(‘.con‘).innerHTML = ‘<ul style="width:‘+ imgLength*conWidth +‘px;height:‘+ conHeight +‘px;list-style-type:none;font-size:0;position:absolute;left:0;top:0;margin:0;padding:0" class="slide-img-con">‘+html+‘</ul>‘; } function getConStyle() { var con = document.querySelector(‘.con‘), style = getComputedStyle(con); conWidth = parseFloat(style.width); conHeight = parseFloat(style.height); } function bindEvent() { con.querySelector(‘.slide-img-con‘).addEventListener(‘touchstart‘, touchStart); con.querySelector(‘.slide-img-con‘).addEventListener(‘touchmove‘, touchMove); con.querySelector(‘.slide-img-con‘).addEventListener(‘touchend‘, touchEnd); } function touchStart(e) { var touch = e.changedTouches[0]; clearInterval(setIntervalTimer); startX = touch.pageX; startY = touch.pageY; ulPos = getULPos(); toggleTransition(); } function touchMove(e) { var touch = e.changedTouches[0]; currentX = touch.pageX; currentY = touch.pageY; changeULPos(ulPos + currentX - startX); } function touchEnd(e) { var touch = e.changedTouches[0]; endX = touch.pageX; endY = touch.pageY; toggleTransition(1); if (endX - startX > 0) { right(); } else { left(); } timer(); } function toggleTransition(flag) { if (flag === 1) { con.querySelector(‘.slide-img-con‘).style.transition = ‘all ‘+ transitionTime +‘ms ease-in-out‘; } else { con.querySelector(‘.slide-img-con‘).style.transition = ‘initial‘; } } function getULPos() { var translateX = con.querySelector(‘.slide-img-con‘).style.transform; if (translateX) { return parseFloat(translateX.split(‘translateX(‘)[1]); } else { return 0; } } function changeULPos(x) { con.querySelector(‘.slide-img-con‘).style.transform = ‘translateX(‘+ x +‘px)‘; } function changeLiPos(num, x) { var domList = con.querySelectorAll(‘.slide-img-con li‘); domList[num].style.left = x + ‘px‘; } function getLiPos(num) { return parseFloat(con.querySelectorAll(‘.slide-img-con li‘)[num].style.left); } function left() { currentImg++; localImgIndex(1); if (!imgarr[currentImg + 1]) { imgarr.push(imgarr.shift()); changeLiPos(imgarr[imgarr.length-1], getLiPos(imgarr[imgarr.length - 2]) + conWidth); currentImg--; } changeULPos(ulPos - conWidth); ulPos = getULPos(); changeDotStyle(); } function right() { currentImg--; localImgIndex(-1); if (!imgarr[currentImg - 1]) { imgarr.unshift(imgarr.pop()); changeLiPos(imgarr[0], getLiPos(imgarr[1]) - conWidth); currentImg++; } changeULPos(ulPos + conWidth); ulPos = getULPos(); changeDotStyle(); } function timer() { setIntervalTimer = setTimeout(function(e) { toggleTransition(1); left(); timer(); }, slideTime); } function initDot() { var dom = ‘‘, ul = document.createElement(‘ul‘); for (var i = 0; i < imgLength; i++) { dom += ‘<li style="width:10px;height:10px;background:lightgrey;border-radius:5px;margin-left:5px;list-style-type:none;display:inline-block;padding:0;float:left;"></li>‘; } ul.classList.add(‘slide-img-dot‘); ul.style.cssText = ‘position:absolute;left:50%;top:90%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);list-style-type:none;height:10px;padding:0;margin:0;‘; ul.innerHTML = dom; con.appendChild(ul); } function changeDotStyle() { var dotList = document.querySelectorAll(‘.slide-img-dot li‘); [].slice.call(dotList).forEach(function(e, i) { e.style.backgroundColor = ‘lightgrey‘; }) dotList[imgIndex[0]].style.backgroundColor = ‘white‘; } function localImgIndex(flag) { if (flag === 1) { imgIndex.push(imgIndex.shift()); } else { imgIndex.unshift(imgIndex.pop()); } } function setParentStyle() { con.style.cssText+= ‘;position:relative;overflow:hidden;‘ } init(); } slide({ slideTime:3000, transitionTime:300, className:‘.con‘, img: [ ‘http://fmn.rrfmn.com/fmn070/20170518/1820/original_ouZ8_daca000044b31e7f.jpg‘, ‘http://hdn.xnimg.cn/photos/hdn121/20170519/1530/h_large_O9z4_a69d000420c1195a.jpg‘, ‘http://fmn.rrimg.com/fmn073/20170518/1815/original_FRpD_0db800002f041e83.jpg‘, ‘http://fmn.rrimg.com/fmn077/20170428/1910/original_ogL5_c5c2000e38381e84.jpg‘, ‘http://fmn.rrimg.com/fmn076/20170508/0930/original_nlQe_924f000d99bb1e83.jpg‘ ] }); </script> </body> </html>
h5原生js實現輪播圖