这篇文章主要介绍“如何使用html5+CSS3实现滑动换图片效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用html5+CSS3实现滑动换图片效果”文章能帮助大家解决问题。

在html中可配置滑动参数。具体代码如下：

HTML代码：

<!DOCTYPEHTML><html><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/><metaname="viewport"content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="apple-mobile-web-app-status-bar-style"content="black"/><metacontent="telephone=no"name="format-detection"/><metaname="keywords"content="seokeywords"/><metaname="description"content="seodescription"/><title>H5手指滑动切换图片</title><style>ul,li{margin:0;padding:0;}@mediascreenand(min-width:240px){html,body{font-size:9px;}}@mediascreenand(min-width:320px){html,body{font-size:12px;}}@mediascreenand(min-width:480px){html,body{font-size:18px;}}@mediascreenand(min-width:640px){html,body{font-size:24px;}}@mediascreenand(min-width:960px){html,body{font-size:36px;}}div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0auto;}div.imgboxul{clear:both;width:75rem;display:inline-block;}div.imgboxulli{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}div.imgboxulliimg{width:24rem;height:16.5rem;}#page{color:red;}</style></head><body><divclass="imgbox"><ul><li><ahref="#"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142399.jpg"></img></a></li><li><ahref="#"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142400.jpg"></img></a></li><li><ahref="#"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142401.jpg"></img></a></li></ul></div><div>这里通过回调显示当前滚动到多少页:<spanid="page">0</span></div><scriptsrc="jquery-1.10.2yuan.js"></script><scriptsrc="slider-H5.js"></script><script>(function(){/*注意：$.mggScrollImg返回的scrollImg对象上有next，prev，go三个方法，可以实现外部对滚动索引的控制。如：scrollImg.next();//会切换到下一张图片scrollImg.go(0);//会切换到第一张图片*/varscrollImg=$.mggScrollImg('.imgboxul',{loop:true,//循环切换auto:true,//自动切换auto_wait_time:3000,//轮播间隔scroll_time:300,//滚动时长callback:function(ind){//这里传过来的是索引值$('#page').text(ind+1);}});})()</script></body></html>

slider-H5.js 代码：

(function($){/*图片滚动效果@jQueryor@Stringbox:滚动列表jQuery对象或者选择器如：滚动元素为li的外层ul@objectconfig:{@Numberwidth:一次滚动宽度，默认为box里面第一个一级子元素宽度[如果子元素宽度不均匀则滚动效果会错乱]@Numbersize:列表长度，默认为box里面所有一级子元素个数[如果size不等于一级子元素个数，则不支持循环滚动]@Booleanloop:是否支持循环滚动默认true@Booleanauto:是否自动滚动,支持自动滚动时必须支持循环滚动，否则设置无效,默认为true@Numberauto_wait_time:自动轮播一次时间间隔,默认为：3000ms@Functioncallback:滚动完回调函数，参入一个参数当前滚动节点索引值}*/functionmggScrollImg(box,config){this.box=$(box);this.config=$.extend({},config||{});this.width=this.config.width||this.box.children().eq(0).width();//一次滚动的宽度this.size=this.config.size||this.box.children().length;this.loop=this.config.loop!==undefined?(this.config.loop==true?true:false):true;//默认能循环滚动this.auto=this.config.auto!==undefined?(this.config.auto==true?true:false):true;//默认自动滚动this.auto_wait_time=this.config.auto_wait_time||3000;//轮播间隔this.scroll_time=this.config.scroll_time!==undefined?(this.config.scroll_time>0?this.config.scroll_time:0):300;//滚动时长this.minleft=-this.width*(this.size-1);//最小left值，注意是负数[不循环情况下的值]this.maxleft=0;//最大lfet值[不循环情况下的值]this.now_left=0;//初始位置信息[不循环情况下的值]this.point_x=null;//记录一个x坐标this.point_y=null;//记录一个y坐标this.move_left=false;//记录向哪边滑动this.index=0;this.busy=false;this.timer;this.init();}$.extend(mggScrollImg.prototype,{init:function(){this.bind_event();this.init_loop();this.auto_scroll();},bind_event:function(){varself=this;self.box.bind('touchstart',function(e){vart=e.touches?e.touches:e.originalEvent.targetTouches;if(t.length==1&&!self.busy){self.point_x=t[0].screenX;self.point_y=t[0].screenY;}}).bind('touchmove',function(e){vart=e.touches?e.touches:e.originalEvent.targetTouches;if(t.length==1&&!self.busy){returnself.move(t[0].screenX,t[0].screenY);//这里根据返回值觉得是否阻止默认touch事件}}).bind('touchend',function(e){!self.busy&&self.move_end();});},/*初始化循环滚动,当一次性需要滚动多个子元素时，暂不支持循环滚动效果,如果想实现一次性滚动多个子元素效果，可以通过页面结构实现循环滚动思路：复制首尾节点到尾首*/init_loop:function(){if(this.box.children().length>1&&this.box.children().length==this.size&&this.loop){//暂时只支持size和子节点数相等情况的循环this.now_left=-this.width;//设置初始位置信息this.minleft=-this.width*this.size;//最小left值this.maxleft=-this.width;this.box.prepend(this.box.children().eq(this.size-1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));this.box.css('width',this.width*(this.size+2));}else{this.loop=false;this.box.css('width',this.width*this.size);}},auto_scroll:function(){//自动滚动varself=this;if(!self.auto)return;clearTimeout(self.timer);self.timer=setTimeout(function(){self.go_index(self.index+1);},self.auto_wait_time);},go_index:function(ind){//滚动到指定索引页面varself=this;if(self.busy)return;clearTimeout(self.timer);self.busy=true;if(self.loop){//如果循环ind=ind<0?-1:ind;ind=ind>self.size?self.size:ind;}else{ind=ind<0?0:ind;ind=ind>=self.size?(self.size-1):ind;}if(!self.loop&&(self.now_left==-(self.width*ind))){self.complete(ind);}elseif(self.loop&&(self.now_left==-self.width*(ind+1))){self.complete(ind);}else{if(ind==-1||ind==self.size){//循环滚动边界self.index=ind==-1?(self.size-1):0;self.now_left=ind==-1?0:-self.width*(self.size+1);}else{self.index=ind;self.now_left=-(self.width*(self.index+(self.loop?1:0)));}self.box.css(this.get_style(1));setTimeout(function(){self.complete(ind);},self.scroll_time);}},complete:function(ind){//动画完成回调varself=this;self.busy=false;self.config.callback&&self.config.callback(self.index);if(ind==-1){self.now_left=self.minleft;}elseif(ind==self.size){self.now_left=self.maxleft;}self.box.css(this.get_style(2));self.auto_scroll();},next:function(){//下一页滚动if(!this.busy){this.go_index(this.index+1);}},prev:function(){//上一页滚动if(!this.busy){this.go_index(this.index-1);}},move:function(point_x,point_y){//滑动屏幕处理函数varchangeX=point_x-(this.point_x===null?point_x:this.point_x),changeY=point_y-(this.point_y===null?point_y:this.point_y),marginleft=this.now_left,return_value=false,sin=changeY/Math.sqrt(changeX*changeX+changeY*changeY);this.now_left=marginleft+changeX;this.move_left=changeX<0;if(sin>Math.sin(Math.PI/3)||sin<-Math.sin(Math.PI/3)){//滑动屏幕角度范围：PI/3--2PI/3return_value=true;//不阻止默认行为}this.point_x=point_x;this.point_y=point_y;this.box.css(this.get_style(2));returnreturn_value;},move_end:function(){varchangeX=this.now_left%this.width,ind;if(this.now_left<this.minleft){//手指向左滑动ind=this.index+1;}elseif(this.now_left>this.maxleft){//手指向右滑动ind=this.index-1;}elseif(changeX!=0){if(this.move_left){//手指向左滑动ind=this.index+1;}else{//手指向右滑动ind=this.index-1;}}else{ind=this.index;}this.point_x=this.point_y=null;this.go_index(ind);},/*获取动画样式，要兼容更多浏览器，可以扩展该方法@intfig:1动画2没动画*/get_style:function(fig){varx=this.now_left,time=fig==1?this.scroll_time:0;return{'-webkit-transition':'-webkit-transform'+time+'ms','-webkit-transform':'translate3d('+x+'px,0,0)','-webkit-backface-visibility':'hidden','transition':'transform'+time+'ms','transform':'translate3d('+x+'px,0,0)'};}});/*这里对外提供调用接口，对外提供接口方法next：下一页prev：上一页go：滚动到指定页*/$.mggScrollImg=function(box,config){varscrollImg=newmggScrollImg(box,config);return{//对外提供接口next:function(){scrollImg.next();},prev:function(){scrollImg.prev();},go:function(ind){scrollImg.go_index(parseInt(ind)||0);}}}})(jQuery)

关于“如何使用html5+CSS3实现滑动换图片效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。