Question

网页图片轮播 如何 用jq实现相互对应切换

大图每次滚动 都给右边相对应的小图加个边框 边框样式为最后一张图 并且鼠标移入到右边的小图片的时候 大图会到相对应的图片上 总共是8张 不知如何写 请各位大神帮忙一下





Answer 1

简单写了写，比较懒就没把图片放到右边，自己调一下，哦对了，我没加轮播

css部分

<style>
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	img {
		vertical-align: middle;
	}
	.box {
		width: 450px;
		margin: 0 auto;
	}
	.big {
		width: 450px;
	}
	.small {
		height: 58px;
		width: 380px;
		margin: 0 auto;
	}
	.small li {
		float: left;
		height: 58px;
		width: 58px;
		margin: 0 9px;
		cursor: pointer;
	}
	.small li img {
		border: 1px solid #fff;
	}
	.small li.hover img, .small li:hover img {
		border-color: #1ab;
	}
	</style>

html+js

 <div class="box">
		<div class="big">
			<img src="images/1.jpg" alt="big">
		</div>
		<ul class="small">
			<li class="hover"><img src="images/1s.jpg" alt="1"></li>
			<li><img src="images/2s.jpg" alt="2"></li>
			<li><img src="images/3s.jpg" alt="3"></li>
			<li><img src="images/4s.jpg" alt="4"></li>
			<li><img src="images/5s.jpg" alt="5"></li>
		</ul>
	</div>
	<script>
	// js方法实现
	var imgs=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg']; // 每个大图的文件名
	var big=document.getElementsByClassName('big')[0];
	var img=big.getElementsByTagName('img')[0]; // 获取.big中的img标签
	var small=document.getElementsByClassName('small')[0]; // 加上[0]表示第一个类名为small的元素
	var lis=small.getElementsByTagName('li'); // 获取ul.small下的所有li标签
	for(var i=0;i<lis.length;i++){
		lis[i].index=i; // 给每个li元素贴一个序号
		lis[i].onmouseover=function(){ // 添加鼠标滑过效果
			console.log(this.index);
			for(var i=0;i<lis.length;i++){
				lis[i].className=''; // 通过循环将所有li的class清空
			}
			this.className='hover'; // 当前鼠标滑过的li添加class="hover"
			img.src='images/'+imgs[this.index]; // 修改大图为对应图片
		}
	}
	</script>