手html左右轮播,移动端横向滑屏之轮播图

图片描述

移动端的轮播图可以有很多方式实现，最常见的可以使用定位 + 手指事件。但是我这里介绍的是 CSS3 中的 2d 变换和手指事件，因为变换属性的代码更加简洁优雅

一. 移动端的准备工作

* {

padding: 0;

margin: 0;

}

img {

display: block;

}

li {

list-style: none;

}

input {

outline: none;

}

a {

text-decoration: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

html,body {

height: 100%;

overflow: hidden;

}

CSS 中的初始化

// 阻止浏览器的默认行为

document.addEventListener("touchstart", function(event) {

event.preventDefault()

});

// rem 适配

(function() {

var styleNode = document.createElement("style")

var width = document.documentElement.clientWidth

styleNode.