案例效果：实现移动端端轮播图效果

实现移动端端轮播图效果

实现效果

插件使用：
1.zepto.js
2.touch.js

实现效果

html部分：

<!-- 结构 --><!-- li*6>a[href=#]>img[src=./images/$.jpg] --><div class="box"><ul><!-- 为了无缝连接，我们在图片这里前后增加了2个图片 --><li><a href="#"><img src="./images/6.jpg" alt=""></a></li><li><a href="#"><img src="./images/1.jpg" alt=""></a></li><li><a href="#"><img src="./images/2.jpg" alt=""></a></li><li><a href="#"><img src="./images/3.jpg" alt=""></a></li><li><a href="#"><img src="./images/4.jpg" alt=""></a></li><li><a href="#"><img src="./images/5.jpg" alt=""></a></li><li><a href="#"><img src="./images/6.jpg" alt=""></a></li><li><a href="#"><img src="./images/1.jpg" alt=""></a></li></ul></div>

css部分：

 * {margin: 0;padding: 0;}ul {list-style: none;}.box {width: 100%;overflow: hidden;}ul {/* 把li变成8张之后，需要，把ul的宽度变宽 */width: 800%;/* transition: all 1s; */}li {float: left;width: 12.5%;}img {width: 100%;}

js部分：

//获取DOMvar box = $(".box");var img = $("ul img");var ul = $("ul");var imgWidth = img.width();var index = 1;var right = index * imgWidth;ul.css("transform", `translateX(-${right}px)`);setTimeout(function() {ul.css("transition", "all 500ms");}, 100);//往左滑，坐标在增大box.on("swipeLeft", function() {index++;// if (index == img.length) {//     index = 0;// }var left = index * imgWidth;ul.css("transform", `translateX(-${left}px)`);});//往左滑，坐标在增大box.on("swipeRight", function() {index--;// if (index == -1) {//     index = img.length - 1;// }var right = index * imgWidth;ul.css("transform", `translateX(-${right}px)`);});//过渡结束之后时进行ul.on("transitionend", function() {//1.判读 index//往左面滑(滑倒倒数第一张的时候，其实显示的已经是用户想看的第一张)if (index == img.length - 1) {index = 1;//index修改完毕之后需要重新执行一遍var right = index * imgWidth;ul.css("transform", `translateX(-${right}px)`);//2.取消过渡效果ul.css("transition", "none");//3.已经判断完毕了，重新打开过渡效果//这里设置一个1毫秒的延迟，否则会一起进行setTimeout(function() {ul.css("transition", "all 500ms");}, 1);}//1.判读 index//往右面滑(滑倒index为0的时候，显示的是客户想看的第6张图)if (index == 0) {//2.取消过渡效果ul.css("transition", "none");index = img.length - 2;//index修改完毕之后需要重新执行一遍var left = index * imgWidth;ul.css("transform", `translateX(-${left}px)`);//延迟开启过渡效果setTimeout(function() {ul.css("transition", "all 500ms");}, 1)}})

代码目前就分享到这里，欢迎大家有问题积极评论

案例效果：实现移动端端轮播图效果相关推荐

html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
swiper4.0（移动端）轮播图 - 案例篇
swiper4.0(移动端)轮播图 - 案例篇官方演示地址:异形的slide · 点击前往查看 banner 效果图: 代码: <!DOCTYPE html> <html lang ...
JavaScript实现移动端跟手轮播图
touch事件了解触摸的仨事件: 事件说明 touchstart事件当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove 当手指在屏幕上滑动的时候连续地触发.在这个 ...
php滑动轮播效果,js实现移动端手指滑动轮播图效果
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. 如下所示: Document html{heigh ...
横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图发布时间:2020-09-09 02:10:03 来源:脚本之家阅读:100 作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播 ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
Android 循环滚动控件ViewFlipper，可实现跑马灯或轮播图效果
ViewFlipper--Android循环滚动控件 1.效果如下: 2.实现方法 (1)创建进出动画上下滚动动画 y_in.xml <?xml version="1.0" ...

案例效果：实现移动端端轮播图效果

实现移动端端轮播图效果

实现效果

案例效果：实现移动端端轮播图效果相关推荐

最新文章

热门文章