个人感觉，最关键的一点是 滑动之前页面的布局（要让图片都在同一行，并且超过宽度的部分自动被隐藏起来）。
办法是：最外部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>
分享到：
相关推荐
AS3 仿苹果滑动图片菜单是一种在Flash环境中实现的用户界面组件，它模拟了苹果设备上常见的平滑滚动图片菜单效果。这个组件允许用户通过水平或垂直滑动来浏览一系列图片，通常用于展示产品、图片库或者导航菜单。...
在这个"HTML5无限循环滚动图片展示"项目中，我们聚焦于HTML5的一个应用场景——创建一种具有3D效果的图片展示效果，这种效果能够无限循环地滚动图片。 首先，实现这种效果的关键在于HTML5的Canvas元素，这是一个...
在Android开发中，轮播图（也称为滑动广告或无限滚动图片）是一种常见的组件，用于展示产品、推广信息或动态内容。标题“android 轮播 滑动 图片广告 无限滚动”和描述暗示了我们将在讨论如何使用Android的ViewPager...
在IT领域，尤其是网页设计和用户体验设计中，"滚动图片"是一种常见的视觉呈现方式，它通常指的是在网页或应用界面上水平或垂直滑动的一系列图像。这种效果能够吸引用户的注意力，展示更多的信息，同时保持界面的简洁...
3. **滑动图片**：这通常指的是在滚动视图（如ListView、RecyclerView或ScrollView）中显示图片。当用户滚动时，图片需要随着视图的滚动而快速加载和显示。高效的图片加载库，如Glide和Picasso，能够自动管理图片的...
【标题】"jsp滚动图片小例子"涉及到的是在JavaServer Pages (JSP) 中实现动态图片轮播的技术。JSP是一种基于Java的服务器端脚本语言，常用于创建动态网页内容，包括展示图像、视频等多媒体元素。在这个特定的例子中...
这种效果为用户提供了一种直观、流畅的图片浏览体验，通过手指滑动或者鼠标滚动即可轻松切换图片。 在HTML5中，`<div>`元素常被用来作为容器，承载滑动图片的各个部分，如图片、导航按钮等。同时，HTML5的`data-*`...
### JS滚动图片广告实现方法详解 ...通过定义核心函数与变量，封装滑动逻辑，最终实现了动态且具有多种缓动效果的滚动图片展示功能。开发者可以根据实际需求调整动画效果和控制逻辑，以达到更佳的视觉体验。
水平滚动图片网页特效是一种常见的网页设计手法，它能够为用户带来独特的浏览体验，尤其是在展示大量图片或需要强调视觉流动感的网站中。这种特效通常利用JavaScript、CSS3或者专门的库如jQuery来实现，使图片在水平...
8. **交互设计**：除了自动滚动外，还应提供手动切换的选项，比如左右箭头或者触摸滑动。同时，当前选中的图片应该有明显的指示，如高亮边框或不同的透明度，让用户清楚地知道哪张图片正在显示。 9. **SEO优化**：...
至此，我们就实现了基本的左右滚动图片效果。这个轮播图支持手动点击“上一个”和“下一个”按钮切换图片，同时也可通过修改代码添加自动播放功能。您可以根据需求调整动画速度、添加指示器或分页器等增强用户体验。...
为了提供更好的用户体验，开发者经常会在WAP网站上运用各种JavaScript（JS）技术来实现动态效果，其中，触屏滑动图片特效自动滚动是一种常见且实用的设计。本文将详细讲解如何在WAP手机网站上实现这种功能。 首先，...
请注意看 MainActivity 里的注释 ...功能和 腾讯 应用宝 360手机助手 一样 代码简单 设置简单 自定义圆点 滚动时间 Gallery 实现 滚动图片只有一个类 可加载网络图片 也能使用本地图片 加了好多注释
【标题】"带放大效果jquery左右滚动图片代码.zip" 是一个使用jQuery库实现的JavaScript特效，主要用于创建一种图片浏览体验，用户可以左右滑动图片，同时具有点击小图展示大图的功能。这种特效在网页设计中常用于...
在网页设计中，为了提供良好的用户体验，特别是在展示大量图片或者需要滑动浏览的内容时，左右滚动图片的效果变得越来越常见。这种效果可以使用户在不改变浏览器窗口大小的情况下，平滑地在图片之间进行导航，保持...
2. **定义CSS样式**：设置容器和图片的样式，确保图片能够正确显示并具备滚动效果。 3. **编写JavaScript逻辑**：通过DOM操作和事件监听实现滚动效果。 - 初始化变量，如滚动速度、DOM元素引用等。 - 编写滚动函数...
HTML5手机触摸滑动图片幻灯片轮播切换代码是一种常见的网页交互效果，它使得用户可以通过手指滑动在移动端浏览一组连续的图片或内容。这种技术的实现主要依赖于HTML5的新特性，如Canvas、SVG以及离线存储等，但在这...
这些插件提供了丰富的自定义选项，如动画速度、自动播放、触摸滑动支持等，使得开发者可以轻松地创建出个性化的无缝滚动图片效果。 CSS3也在此类效果中发挥了重要作用，特别是其过渡（Transition）和动画...
2. **图片轮播**：图片轮播是一种网页设计中的组件，用于展示一组图片并按照特定顺序进行切换，通常用于产品展示或新闻滚动等场景。它可以手动控制，也可以设置自动播放。 3. **CSS样式与布局**：为了实现图片切换...
Swiper 是一款强大的移动设备触摸滑动库，尤其适用于创建响应式和触摸友好的图片轮播、幻灯片或任何内容滚动效果。在本项目"swiper移动端触屏滑动图片轮播切换代码.zip"中，我们可以看到一个使用 Swiper.js 的实现，...