css中我有多张图片，我要实现点击一下旁边的按钮就移动一张图片，要左右都可以移动的。请高手指点！
4个回答
展开全部
我这写了个简单的，你要根据你的需要改动。
我实现的是，有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;}
ul{margin: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>
我实现的是，有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;}
ul{margin: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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我的做法是：
<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>
希望等你有效，再见！
<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>
希望等你有效，再见！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我在免费模板网上看到一个，网址是http://www.mianfeimoban.com/tuxingtuxiang_tx/3578.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
通过js修改img 的src 就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
