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

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

效果预览如下图:

图片来源于网络


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

<!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="https://segmentfault.com/a/1190000022921826/1.jpg" /><!--这里的图片换上到时候自己对应的图片-->

<img src="https://segmentfault.com/a/1190000022921826/2.jpg" />

<img src="https://segmentfault.com/a/1190000022921826/3.jpg" />

<img src="https://segmentfault.com/a/1190000022921826/4.jpg" />

<img src="https://segmentfault.com/a/1190000022921826/5.jpg" />

<img src="https://segmentfault.com/a/1190000022921826/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>

最后

以上是 超简单的图片左右切换滑动 的全部内容, 来源链接: utcz.com/a/23791.html

回到顶部