html中图片左右切换,超简单的图片左右切换滑动

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

效果预览如下图：

代码部分(直接复制代码便可使用，注意对应的图片路径改成自己的图片路径，图片大小建议300*300)

html>

超简单的图片左右切换滑动

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);

}

}

上一页

下一页

最后

觉得文章不错的，给我点个赞哇，关注一下呗！

技术交流可关注微信公众号【GitWeb】，加我好友一起探讨

微信交流群：加好友(备注思否)邀你入群，抱团学习共进步