<img src="关于医院.jpg">
<span>关于医院</span>
</div>
$(function(){
var imgs=document.getElementsByName("img")
$(".gyyy").click(function(){
imgs.src="新图片的路径"；
$(".gyyy>span").css("color","blue")
})
})
使用Jquery类库，步骤：
1、准备好html：
<div class="container"><div class="item-list">
<div class="item active"><img src="0.jpg" alt="第1张图"></div>
<div class="item"><img src="1.jpg" alt="第2张图"></div>
<div class="item"><img src="2.jpg" alt="第3张图"></div>
</div>
<div class="item-control">
<a href='javascript:' class="active">●</a>
<a href='javascript:'>●</a>
<a href='javascript:'>●</a>
</div>
</div>
2、为html设置样式
<style>.container{
width: 500px
height: 300px
text-align: center
background: red
position:relative
}
.container>.item-control{
display: inline-block
width: 100%
left: 0
position: absolute
bottom: 10px
background: rgba(0,0,0,0.2)
}
.container>.item-control>a{
font-size: 20px
color: rgba(255,255,255,0.7)
text-decoration: none
}
.container>.item-control>a.active{
color: #fff
}
.container>.item-list,
.container>.item-list>.item{
width: 100%
height: 100%
}
.container>.item-list>.item{
display: none
}
.container>.item-list>.item.active{
display: block
}
</style>
3、编写Js
<script>(function(){
$(document).on('click','.container .item-control a',function(){
var _index = $(this).index()
$(this).addClass('active').siblings().removeClass('active')
$('.container .item-list .item').eq( _index ).addClass('active').siblings().removeClass('active')
})
})()
</script>
最终效果见图：
我这写了个简单的，你要根据你的需要改动。我实现的是，有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/htmlcharset=utf-8">
<style type="text/css">
body{ margin:0font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}
ul{margin:0padding:0list-style:none}
#imgList{ width:100pxheight:100px/* 定义显示窗口的大小 */
border:1px solid #000overflow:hidden}
#imgList ul{ width:500px} /* 定义全部图片的宽度和,这里有5张，每张宽100px,总宽度就是500px */
#imgList li{ width:100pxheight:100pxfloat:left} /* 单张图片的所在位置的大小，宽度就是图片宽度加左右边距 */
#imgList img{ width:90pxheight:90pxmargin: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>
