css中我有多张图片，我要实现点击一下旁边的按钮就移动一张图片，要左右都可以移动的。请高手指点！
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中我有多张图片，我要实现点击一下旁边的按钮就移动一张图片，要左右都可以移动的。请高手指点！相关的知识，希望对你有一定的参考价值。
我这写了个简单的，你要根据你的需要改动。我实现的是，有5张图，每次只显示一张图片，点按钮切换。
<!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">
<style type="text/css">
body margin:0;font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;
ulmargin:0; padding:0; list-style:none;
#imgList width:100px; height:100px; /* 定义显示窗口的大小 */
border:1px solid #000; overflow:hidden
#imgList ul width:500px; /* 定义全部图片的宽度和,这里有5张，每张宽100px,总宽度就是500px */
#imgList li width:100px; height:100px; float:left; /* 单张图片的所在位置的大小，宽度就是图片宽度加左右边距 */
#imgList img width:90px; height:90px; margin:5px; /* 单张图片的尺寸，及外边距 */
</style>
<script>
function move(to)
var imgList = document.getElementById("imgList");
if(to == "left") imgList.scrollLeft += 100; //li的宽度
else imgList.scrollLeft -= 100; //li的宽度
</script>
</head>
<body>
<!-- 请使用以下html结构 -->
<div id="imgList">
<ul>
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
<li><img src="Photoshop CS4.png">
</ul>
</div>
<!-- 这个可以自己定义，把事件copy过去就行了 -->
<input type="button" value="left" onClick="move('left')">
<input type="button" value="right" onClick="move('right')">
</body>
</html> 参考技术A 我的做法是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<div id="demo" style="width:200px; height:50px; overflow:hidden; white-space:nowrap;">
<div id="demo1" style="display:inline;">
<img src="newsimg.jpg" width="50" height="50" alt="1">
<img src="newsimg.jpg" width="50" height="50" alt="2">
<img src="newsimg.jpg" width="50" height="50" alt="3">
<img src="newsimg.jpg" width="50" height="50" alt="4">
<img src="newsimg.jpg" width="50" height="50" alt="5">
<img src="newsimg.jpg" width="50" height="50" alt="6">
<img src="newsimg.jpg" width="50" height="50" alt="7">
<img src="newsimg.jpg" width="50" height="50" alt="8">
<img src="newsimg.jpg" width="50" height="50" alt="9">
<img src="newsimg.jpg" width="50" height="50" alt="10">
</div>
<div id="demo2" style="display:inline;"></div>
</div>
<script>
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
var dis = 0;
function changeImg()
if(tab.scrollLeft >= tab2.offsetWidth)//当滚动至demo1与demo2交界时
tab.scrollLeft-=tab1.offsetWidth; //demo跳到最顶端
else
tab.scrollLeft+=60;
if(tab.scrollLeft >= tab2.offsetWidth)//当滚动至demo1与demo2交界时
tab.scrollLeft-=tab1.offsetWidth; //demo跳到最顶端
</script>
<input type="button" value="改变" onClick="changeImg()">
</body>
</html>
希望等你有效，再见！ 参考技术B
我在免费模板网上看到一个，网址是http://www.mianfeimoban.com/tuxingtuxiang_tx/3578.html
js，定义按钮加一减一？
假设要开发一个游戏，分配给你的任务是编写全局方法add和minus，用来加命和减命，并返回的命的条数。要求命的条数保存在变量lives中,且必须为局部变量
<input type="text" id="lives" value="0">
<button onclick="add()">加命</button>
<button onclick="minus()">减命</button>
JS
var lives=0; // 命数
funtion add()
lives+=1;
document.getElementById("lives").value=lives;
function minus()
lives-=1；
document.getElementById("lives").value=lives;
以上是关于css中我有多张图片，我要实现点击一下旁边的按钮就移动一张图片，要左右都可以移动的。请高手指点！的主要内容，如果未能解决你的问题，请参考以下文章
求一个js效果页面里可显示多张图片，当鼠标经过哪张图片，那张图片就变大，其余的图片自动缩小