JavaScript实战项目：移动端 Touch 轮播图

最新推荐文章于 2024-01-24 18:53:27 发布

IT界小南瓜

最新推荐文章于 2024-01-24 18:53:27 发布

阅读量246

点赞数

文章标签： JavaScript 前端前端基础前端开发 Web前端

本文链接：https://blog.csdn.net/bianchengkk123/article/details/102886930

版权

这篇博客详细介绍了如何使用JavaScript实现移动端Touch轮播图，包括HTML结构、样式初始化、添加样式、JavaScript准备工作、添加定时器、实现touch滑动等步骤。通过触屏滑动实现轮播图的切换，并提供了完整的示例代码。

摘要由CSDN通过智能技术生成

Touch 轮播图

touch轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。

1. html 结构

结构上，还是用ul、li来存放轮播图片，ol、li来存放轮播小圆点：

2. 样式初始化

html的一些标签，都会有一些默认样式，比如body标签默认是有一个边距的，为了不影响美观，我们需要清除掉。

/* 清除标签默认边距 */
body,ul,li,ol,img {
    margin: 0;
    padding: 0;
}

/* 清除 ul 等标签前面的“小圆点” */
ul,li,ol {
    list-style-type: none;
}

/* 图片自适应 */
img {
    width: 100%;
    height: auto;
    border: none;
    /* ie8 */
    display: block;
    -ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

3. 添加样式

在前面讲特效的时候，我们说过如何使用原生js实现移一个轮播图的概念，但是当时的方式是通过li浮动，这里给大家介绍一种新的方——定位。

思路：

给ul外层的盒子一个相对定位；
这里的ul高度不能写死，它应该是li撑开的高度，但是由于li绝对定位，没办法撑开这个高度，所以这里的ul需要在js里面动态设置高度；
给li设置相对定位，并且left、top都为0，再给li添加一个transform:translateX(300%)属性，目的是初始化显示的图片为空，然后在js里只需要动态设置每个li的translateX值，即可实现轮播；
设置小圆点区域，因为小圆点个数未知，所以ol的宽度也未知，想要让一个未知宽度的盒子水平居中，可以使用absolute定位结合left百分比的方式实现；
给ol下面的li设置一个宽高添加圆角边框属性，并且左浮动，这样就能显示一排空心的小圆点了；
最后，添加一个样式类，里面设置一个背景属性，用来显示当前展示图片对应的小圆点。

/* 轮播图最外层盒子 */
.carousel {
    position: relative;
    overflow: hidden;
}

.carousel ul {
    /* 这个高度需要在JS里面动态添加 */
}

.carousel ul li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
    -webkit-transform: translateX(300%);
    transform: translateX(300%);
}

/* 小圆点盒子 */
.carousel .points {
    /* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}

/* 小圆点 */
.carousel .points li {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #fff;
    float: left;
    margin: 0 2px;
}

/* 选中小圆点的样式类 */
.carousel .points li.active {
    background-color: #fff;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

4. js 准备工作

先不考虑别的，js在初始化的时候，首先要做的就是给ul添加上一个高度，不然图片是不显示的。

给UL动态设置高度
动态生成小圆点（根据图片的张数创建小圆点个数，i=0 添加active）
初始化三个li的基本位置

定义三个变量，分别用来存储三个li的下（left存储最后一张图片的下标，center和right分别存储第一张和第二张的下标）
通过数组[下标]的方式给三个li设置定位后left方向的位置


var carousel = document.querySelector('.carousel');
var carouselUl = carousel.querySelector('ul');
var carouselLis = carouselUl.querySelectorAll('li');
var points = carousel.querySelector('ol');
// 屏幕的宽度（轮播图显示区域的宽度）
var screenWidth = document.documentElement.offsetWidth;

// 1- ul设置高度
carouselUl.style.height = carouselLis[0].offsetHeight + 'px';

// 2- 生成小圆点
for(var i = 0; i < carouselLis.length; i++){
    var li = document.createElement('li');
    if(i