这种效果的主要技术点是基于触摸屏设备特有的触摸事件；接下来，我们进入这个主题。
第一个是HTML布局：
1。这里强调的是记住视口到HTML的适口性。
2，因为当我们移动第一个图片和最后一张图片时，我们需要切换到最后一个和第一个，我们需要在最后一张图片添加到第一张图片之前，我们想要达到预期的效果，并且在最后一张图片之后添加第一张图片。
三.f_l代表左浮动
***代码如下：**
接下来是CSS样式：
注意，这里没有添加正则重置样式代码。
jd_banner.banner_imgs {。
屏幕宽度的10倍/ **
宽度：1000%；
}
jd_banner.banner_imgs李{。
屏幕宽度
宽度：10%；
}
jd_banner.banner_imgs李{。
显示块；
宽度：100%；
}
jd_banner.banner_imgs img {李。
显示块；
宽度：100%；
}
jd_banner.banner_index {。
位置：绝对；
底部：15px；
左：50%；
margin-left: - 64px；
}
jd_banner.banner_index李{。
浮点数：左；
宽度：6px；
身高：6px；
border: 1px solid白色；
边框半径：50%；
保证金：0 5px；
}
{ jd_banner.banner_index妹妹系列。
背景颜色：# FFF；
}
最后，最重要的js代码
1，触发后transitionend过渡主要是保证切换到最后一张我们手工完成的效果，并切换到真正的第一张照片。
2个三要素。触摸事件：touchstart touchmove --手指时，手指的移动，手指屏幕touchend；
三.事件。触动{ 0 }。ClientX获取位置，当手指按下，你可以打印出事件看什么属性包含。
在window.onload =函数（）{
幻灯片（）；
}
函数幻灯片（）{
无功bannerimgs = document.queryselector（。banner_imgs ）；
VaR指标document.queryselectorall（。banner_index李）；
无功imglis = document.queryselectorall（。banner_imgs李）；
屏幕宽度
VaR的屏幕宽度= document.body.offsetwidth；
var指数= 1；
默认显示应该是第二张图片。
bannerimgs.style.transform =translatex（+屏幕宽度*指数* 1 +PX）；
添加过渡效应
功能settransition（）{
bannerimgs.style.webkittransition =所有的0.2 s；
bannerimgs.style.transition =所有的0.2 s；
}
移除/转换效果
功能cleartransition（）{
bannerimgs.style.webkittransition =没有；
bannerimgs.style.transition =没有；
}
设置/移动距离
功能settranslatex（距离）{
bannerimgs.style.webkittransform =translatex（+远程+PX）；
bannerimgs.style.transform =translatex（+远程+PX）；
}
点控制
函数设定值（）{
对于（var i = 0；i < indexs.length；i++）{
=指标{我}。类名；
}
{ 1 }指标指数。类名=电流；
}
设置计时器
VaR定时器= setInterval（）函数（）{
索引+；
settransition（）；
settranslatex（屏幕宽度*指数×1）；
}，1000）；
添加过渡结束事件
BannerImgs.addEventListener（transitionend
如果（索引> 8）{
索引= 1；
{ { if（索引< 1）
索引= 8；
}
cleartransition（）；
settranslatex（屏幕宽度*指数×1）；
设定点（）；
}）
添加触摸事件
层= 0；
VaR Movex = 0；
无功ismove = false；
BannerImgs.addEventListener（touchstart
ismove = false；
ClearInterval（定时器）；
StartX =事件。触动{ 0 }。ClientX；
}）
BannerImgs.addEventListener（touchmove
ismove =真；
Movex =事件。触动{ 0 }。ClientX - startx；
settranslatex（Movex +指数*屏幕宽度×1）；
}）
BannerImgs.addEventListener（touchend
如果（isMove Math.abs（Movex）>屏幕宽度 / 3）{
如果（Movex＜0）{
索引+；
} {如果其他（Movex > 0）
指数；
}
}
settransition（）；
settranslatex（指数*屏幕宽度×1）；
定时器= setInterval（）{（）函数（
索引+；
settransition（）；
settranslatex（屏幕宽度*指数×1）；
}，1000）；
}）
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。
