jq移动端触摸滑动轮播图特效亲测有效资源-CSDN文库

共7个文件

png：5个

js：1个

html：1个

需积分: 50 148 浏览量 2018-07-13 23:42:35 上传评论 2 收藏 122KB ZIP 举报

在移动设备上，为了有效地展示多张图片或内容，轮播图是一种常见的解决方案。本教程将探讨使用jQuery库实现的移动端触摸滑动轮播图特效，适用于手机和平板等触屏设备。jQuery作为一款强大的JavaScript库，使得创建交互式网页变得更为简单。我们从`index.html`文件入手。这个文件是网页的主体，它包含了HTML结构，用于展示轮播图。一个基本的轮播图结构通常包括一个容器元素（如div）来包裹所有幻灯片，以及左右切换按钮和分页指示器（如果需要）。每个幻灯片都是一个独立的图片或内容块，通过CSS隐藏和显示来实现轮播效果。 ```html <div class="slider"> <div class="slide" style="display: block;"><img src="image/1.jpg"></div> <div class="slide"><img src="image/2.jpg"></div> <div class="slide"><img src="image/3.jpg"></div>  </div> <button class="prev">Prev</button> <button class="next">Next</button> ``` 接下来，我们利用`js`目录下的JavaScript文件来添加动态行为。jQuery库提供了丰富的选择器和方法，可以方便地处理DOM操作和事件监听。在移动端，我们关注的是触摸事件，如`touchstart`、`touchmove`和`touchend`，这些事件在用户与屏幕交互时触发。 ```javascript $(document).ready(function() { var slideIndex = 0; $('.slider .slide').eq(0).show(); function showSlide(index) { $('.slider .slide').hide().eq(index).show(); // 更新分页指示器和按钮状态... } $('.next').on('click touchstart', function() { slideIndex++; if (slideIndex >= $('.slider .slide').length) slideIndex = 0; showSlide(slideIndex); }); $('.prev').on('click touchstart', function() { slideIndex--; if (slideIndex < 0) slideIndex = $('.slider .slide').length - 1; showSlide(slideIndex); }); // 添加平滑滚动效果和手势滑动功能... }); ``` 这段代码定义了滑动轮播图的基本逻辑，当用户点击“下一步”或“上一步”按钮时，会改变当前显示的幻灯片。同时，我们可以考虑添加手势滑动支持，使用户可以通过在屏幕上左右滑动来切换幻灯片。这需要监听`touchmove`事件，计算手指滑动的距离，并根据距离决定是否切换幻灯片。 `image`目录则包含了轮播图所需的图片资源，确保图片路径在HTML和JavaScript中正确引用。对于多个幻灯片，每个幻灯片都应有一张对应的图片。为了提升用户体验，还可以添加自动播放功能、分页指示器、动画过渡效果等。例如，设置定时器每隔一段时间自动切换幻灯片，或者在切换时添加淡入淡出等CSS3动画效果。 jQuery移动端触摸滑动轮播图特效的实现涉及HTML布局、CSS样式以及JavaScript交互。通过合理的代码组织和利用jQuery提供的API，我们可以创建一个功能完备、用户体验良好的轮播图组件。这个组件不仅可以适应各种屏幕尺寸，还能在触屏设备上提供直观的触摸交互。

资源推荐

资源详情

资源评论

收起资源包目录

jquery移动端触摸滑动轮播图特效.zip （7个子文件）

index.html 6KB

jquery-1.8.3.min.js 91KB

image

4.png 15KB

3.png 12KB

5.png 17KB

1.png 26KB

2.png 17KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>jquery移动端触摸滑动轮播图特效</title> <script src="js/jquery-1.8.3.min.js"></script> <style> body{background-color: #262626} *{ padding: 0; margin: 0; } .container{ max-width: 800px; margin: 0 auto; } .slide{ width: 100%; min-height: 180px; overflow: hidden; position: relative; } .slide .img{ overflow: hidden; position: absolute; transition: width 0.4s,height 0.4s,top 0.4s,left 0.4s,z-index 0.4s; } .slide .img img{ width: calc(100% - 14px); height: calc(100% - 14px); margin: 7px; } .slide .img1{ width: 40%; height: 40%; top: 30%; left: -50%; z-index: 1; } .slide .img2{ width: 60%; height: 60%; top: 20%; left: -20%; z-index: 2; } .slide .img3{ width: 80%; height: 80%; top: 10%; left: 10%; z-index: 3; } .slide .img4{ width: 60%; height: 60%; top: 20%; left: 60%; z-index: 2; } .slide .img5{ width: 40%; height: 40%; top: 30%; left: 110%; z-index: 1; } .slide-bt{ position: absolute; left: 50%; bottom: 13%; z-index: 10; } .slide-bt span{ width: 24px; height: 8px; background: #c9caca; float: left; margin: 5px; border-radius: 4px; } .slide .slide-bt .on{ background: #ffd200; } button{ width: 50px; margin: 20px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="container"> <div id="slide" class="slide" class="index-slide" alt="star">  <div class="img"><img src="image/1.png"/></div> <div class="img"><img src="image/2.png"/></div> <div class="img"><img src="image/3.png"/></div> <div class="img"><img src="image/4.png"/></div> <div class="img"><img src="image/5.png"/></div> <div class="slide-bt"></div> </div> <button onclick="left()">上一页</button> <button onclick="right()">下一页</button> </div> <script> var autoLb = false; //autoLb=true为开启自动轮播 var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒） var touch = true; //touch=true为开启触摸滑动 var slideBt = true; //slideBt=true为开启滚动按钮 var slideNub; //轮播图片数量 //窗口大小改变时改变轮播图宽高 $(window).resize(function(){ $(".slide").height($(".slide").width()*0.56); }); $(function(){ $(".slide").height($(".slide").width()*0.56); slideNub = $(".slide .img").size(); //获取轮播图片数量 for(i=0;i<slideNub;i++){ $(".slide .img:eq("+i+")").attr("data-slide-imgId",i); } //根据轮播图片数量设定图片位置对应的class if(slideNub==1){ for(i=0;i<slideNub;i++){ $(".slide .img:eq("+i+")").addClass("img3"); } } if(slideNub==2){ for(i=0;i<slideNub;i++){ $(".slide .img:eq("+i+")").addClass("img"+(i+3)); } } if(slideNub==3){ for(i=0;i<slideNub;i++){ $(".slide .img:eq("+i+")").addClass("img"+(i+2)); } } if(slideNub>3&&slideNub<6){ for(i=0;i<slideNub;i++){ $(".slide .img:eq("+i+")").addClass("img"+(i+1)); } } if(slideNub>=6){ for(i=0;i<slideNub;i++){ if(i<5){ $(".slide .img:eq("+i+")").addClass("img"+(i+1)); }else{ $(".slide .img:eq("+i+")").addClass("img5"); } } } //根据轮播图片数量设定轮播图按钮数量 if(slideBt){ for(i=1;i<=slideNub;i++){ $(".slide-bt").append("<span data-slide-bt='"+i+"' onclick='tz("+i+")'></span>"); } $(".slide-bt").width(slideNub*34); $(".slide-bt").css("margin-left","-"+slideNub*17+"px"); } //自动轮播 if(autoLb){ setInterval(function(){ right(); }, autoLbtime*1000); } if(touch){ k_touch(); } slideLi(); imgClickFy(); }) //右滑动 function right(){ var fy = new Array(); for(i=0;i<slideNub;i++){ fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class"); } for(i=0;i<slideNub;i++){ if(i==0){ $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]); }else{ $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]); } } imgClickFy(); slideLi(); } //左滑动 function left(){ var fy = new Array(); for(i=0;i<slideNub;i++){ fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class"); } for(i=0;i<slideNub;i++){ if(i==(slideNub-1)){ $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]); }else{ $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]); } } imgClickFy(); slideLi(); } //轮播图片左右图片点击翻页 function imgClickFy(){ $(".slide .img").removeAttr("onclick"); $(".slide .img2").attr("onclick","left()"); $(".slide .img4").attr("onclick","right()"); } //修改当前最中间图片对应按钮选中状态 function slideLi(){ var slideList = parseInt($(".slide .img3").attr("data-slide-imgId")) + 1; $(".slide-bt span").removeClass("on"); $(".slide-bt span[data-slide-bt="+slideList+"]").addClass("on"); } //轮播按钮点击翻页 function tz(id){ var tzcs = id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1); if(tzcs>0){ for(i=0;i<tzcs;i++){ setTimeout(function(){ right(); },1); } } if(tzcs<0){ tzcs=(-tzcs); for(i=0;i<tzcs;i++){ setTimeout(function(){ left(); },1); } } slideLi(); } //触摸滑动模块 function k_touch() { var _start = 0, _end = 0, _content = document.getElementById("slide"); _content.addEventListener("touchstart", touchStart, false); _content.addEventListener("touchmove", touchMove, false); _content.addEventListener("touchend", touchEnd, false); function touchStart(event) { var touch = event.targetTouches[0]; _start = touch.pageX; } function touchMove(event) { var touch = event.targetTouches[0]; _end = (_start - touch.pageX); } function touchEnd(event) { if (_end < -100) { left(); _end=0; }else if(_end > 100){ right(); _end=0; } } } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> <p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p> </div> </body> </html>

评论收藏

内容反馈