个人感觉，最关键的一点是 滑动之前页面的布局（要让图片都在同一行，并且超过宽度的部分自动被隐藏起来）。
办法是：最外部DIV固定宽度，然后设置
overflow:hidden ，然后在这里面放一个 非常非常宽的 div，这样这个div右边的部分就会被隐藏起来，最后就可以 在 内部 div 里面放图片了。滑动的实现就是 不断设置 每个 img 对象的
magin-left 属性 就行了，可以设置成负数，将会得到 “滑过去”的效果，但是其实是被隐藏了。部分代码如下，没写完：
<!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 onclick="left()">前进</button>
<button onclick="right()">后退</button>
</body>
</html>
分享到：
相关推荐
一款很实用的HTML5图片播放插件，这款插件是略微带有3D效果的横向无限循环滚动图片流。其特点是当前图片会放大高亮显示在屏幕中央，其余图片则缩小后在显示在两侧，同时图片流是无限循环的。
请注意看 MainActivity 里的注释 ...功能和 腾讯 应用宝 360手机助手 一样 代码简单 设置简单 自定义圆点 滚动时间 Gallery 实现 滚动图片只有一个类 可加载网络图片 也能使用本地图片 加了好多注释
js图片缩放效果制作鼠标滚动图片等比例缩放代码
jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示 jQuery图片点击放大支持手机触屏滑动图片展示
jsp滚动图片小例子jsp滚动图片小例子jsp滚动图片小例子
JS滚动图片写法JS滚动图片写法JS滚动图片写法
横向滚动图片
jQuery响应式图片滚动切换_手指滑动图片滚动切换代码
网络加载缓存 滑动图片 顶部显示带滑动焦点,图片的显示全部由服务器段控制。
滚动图片的代码，可以直接粘贴到网页代码里直接使用.
在php中可能会想到要实现一个图片滚动的程序，此程序可以提供这样的功能
采用了html5和CSS3结合jquery做出的触摸滑动图片效果，可用于触摸屏的触摸滑动，也可以用网页的滑动图片
jQuery手机触屏滑动图片切换代码是一款触屏滑动图片左右滚动展示代码。
jquery触摸滑动图片实例学习用修改难j
焦点图片 图片滚动 图片带标题滚动，一次滚动一张图片
用javascript实现横向滚动图片
滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片
图片滚动图片滚动图片滚动图片滚动图片滚动图片滚动
手机端html实现滑动图片轮播完整代码，带透明圆点，找了好多，这是自己根据别人改好的代码，可完美移植至微信公众号，及基于html5开发的app中
水平滚动图片网页特效