图片轮换的几种方式

方法一：

js代码：

function changePic(currentPic) {
		$(".picName").removeClass("actives");
		var imgpic = currentPic.getElementsByTagName("img")[0];
		$("#bigPic").attr({
			src : imgpic.src
		});
		currentPic.className = "actives picName";
	}

css

.bigpic{
	width: 100%;
	overflow: hidden;
}

.bigpic ul li img{
	width: 100%;
}
.smallpic ul li{
	width: 26%;
	float: left;
	margin: 10px;
}
.smallpic ul li img{
	width: 100%;
}
.actives{
	border: 2px solid #1fb6f9;
}

html

<div class="pictu col-md-5">
							<div class="bigpic">
								<ul>
									<li><img src="__TMPL__/public/assets/images/integral/1.jpg" alt="" id="bigPic"></li>
								</ul>
							</div>
							<div class="smallpic">
								<ul>
									<li class="actives picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/1.jpg" alt=""></li>
									<li class="picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/2.jpg" alt=""></li>
									<li class="picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/3.jpg" alt=""></li>
								</ul>
							</div>
						</div>