图片滑动展示效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/f543711700/article/details/84245050

[color=blue][size=large]个人感觉，最关键的一点是滑动之前页面的布局（要让图片都在同一行，并且超过宽度的部分自动被隐藏起来）。

办法是：最外部DIV固定宽度，然后设置
overflow:hidden ，然后在这里面放一个非常非常宽的 div，这样这个div右边的部分就会被隐藏起来，最后就可以在内部 div 里面放图片了。滑动的实现就是不断设置每个 img 对象的
magin-left 属性就行了，可以设置成负数，将会得到 “滑过去”的效果，但是其实是被隐藏了。部分代码如下，没写完：[/size][/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">

var current = null;
window.onload = function() {
current = $('#image1');
}

var left = function() {
current.animate({marginLeft:-800},'slow',function() {
var tmp = current.next();
var newImg = '<img width="800px;" height="300px;" src="'+current.attr("src") + '" id="' + current.attr("id")+'" />';
$('#div222').append(newImg);
current.detach();
current = tmp;
});
}

var right = function() {
$('#image1').animate({marginLeft:0},'slow');
}
</script>
</head>
<body>

<div style="width: 800px;margin: auto;overflow: hidden;">

<div id="div222" style="width: 30000px;height: 300px;border: 1px solid;">
<img id="image1" src="1.jpg" width="800px;" height="300px;" >
<img id="image2" src="2.jpg" width="800px;" height="300px;">
<img id="image3" src="3.jpg" width="800px;" height="300px;">
</div>

</div>

<button οnclick="left()">前进</button>
<button οnclick="right()">后退</button>

</body>
</html>