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

时间 2020-06-14

标签简单图片左右切换滑动繁體版

原文原文链接

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

效果预览以下图：html

代码部分（直接复制代码即可使用，注意对应的图片路径改为本身的图片路径，图片大小建议300*300）jquery

<!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>

最后

以为文章不错的，给我点个赞哇，关注一下呗！
技术交流可关注微信公众号【GitWeb】，加我好友一块儿探讨
微信交流群：加好友（备注思否）邀你入群，抱团学习共进步