网上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能
效果预览如下图：
代码如一下部分：
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>超简单的图片左右切换滑动</title> <script src=”https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js”></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技术开发培训，让你在同样的起跑线，跑出不一样的高度。
免责声明：文章内容来自互联网，本站仅提供信息存储空间服务，真实性请自行鉴别，本站不承担任何责任，如有侵权等情况，请与本站联系删除。
转载请注明出处：H5教程之超简单的图片左右切换滑动 https://www.bxbdf.com/a/100419.shtml