H5教程之超简单的图片左右切换滑动

2022-03-10 22:15栏目:互联网
TAG:

网上看过很多图片左右切换滑动的效果,不过大都是使用插件实现。插件虽方便,但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库,用最简短的代码实现此功能

效果预览如下图:

代码如一下部分:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超简单的图片左右切换滑动</title> <script src=""></script> <script> var cot=0;//设置一个计数器,初始值为0;作用是用来监听点击切换的时候哪一个图片应该隐藏或者显示 function nex(){ if(cot<=2){ $(.imgs img).eq(cot).animate({margin-left:-305px},500); cot++; } } function pre(){ if(cot>0){ cot--; $(.imgs img).eq(cot).animate({margin-left:0},500); } } </script> </head> <body> <div style="width:900px;margin:auto;overflow:hidden"> <!-- 这个最外围的容器div宽度为900px,每张图宽为300px,所以只显示3张,剩下的图超出容器隐藏起来 --> <div class="imgs" style="width:50000px;"><!--这个div的作用是让所有的图片都排在同一水平上,这样子切换的时候效果会更好--> <img src="1.jpg" /><!--这里的图片换上到时候自己对应的图片--> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> <img src="6.jpg" /> </div> <div> <div onclick="pre()" style="float:left;cursor:pointer">上一页</div> <div onclick="nex()" style="float:right;cursor:pointer">下一页</div> </div> </div> </body> </html>

如果你想要在短时间内掌握HTML5专业技术,不妨就选择千锋重庆HTML5技术开发培训。千锋重庆HTML5技术开发培训课程采用100%全程面授教学,拒绝视频同步授课,拒绝双元视频班教学,拒绝直播授课,教师一对一指导学员做项目,全新打造“主流技术+前沿技术+企业级联动”教学课程,重新优化和定义编程语言,采用最新版本技术开展教学,致力于为学员打造最牛的、最新的技术,助力学员拿下BAT级企业Offer。

千锋重庆HTML5技术开发培训,让你在同样的起跑线,跑出不一样的高度。

本文来自网络,不代表山斋月平台立场,转载请注明出处: https://www.shanzhaiyue.top