超简单的图⽚左右切换滑动
⽹上看过很多图⽚左右切换滑动的效果，不过⼤都是使⽤插件实现。插件虽⽅便，但是对于新⼿的学习并不是最好的。本⽂使⽤jquery这个
由原⽣的JavaScript封装的库，⽤最简短的代码实现此功能
html如何设置图片滚动效果预览如下图：
代码部分（直接复制代码便可使⽤，注意对应的图⽚路径改成⾃⼰的图⽚路径，图⽚⼤⼩建议300*300）
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超简单的图⽚左右切换滑动</title>
<script src="cdn.bootcss/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 > <!-- 这个最外围的容器div宽度为900px，每张图宽为300px，所以只显⽰3张，剩下的图超出容器隐藏起来 -->  <div class="imgs" ><!--这个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()" >上⼀页</div>
<div onclick="nex()" >下⼀页</div>
</div>
</div>
</body>
</html>复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。